Aggiunta di un div creato in modo dinamico a un altro div

[Vindav]

ok, ho capito, ti basta fare questo:

$('.test').change(function(){
var o = $(this);
o.parents('.div_1').find(".menu1").val();
....
o.parents('.div_1').find(".menu3").html(data);

Non ci avevo fatto caso, ma effettivamente all'interno della chiamata ajax cambia lo scope e this non si riferisce più all'elemento che ha scatenato l'evento.

[Azucchi]

ok, ho capito, ti basta fare questo:

$('.test').change(function(){
var o = $(this);
o.parents('.div_1').find(".menu1").val();
....
o.parents('.div_1').find(".menu3").html(data);

Non ci avevo fatto caso, ma effettivamente all'interno della chiamata ajax cambia lo scope e this non si riferisce più all'elemento che ha scatenato l'evento.

Funziona!!! Siiiii Grazie di cuore . Non ci sarei mai arrivato . Ora creo i bottoni e le funzioni a essi collegati per la gestione del database, ma non credo ci saranno problemi. L'uso esclusivo delle classi non dovrebbe crearmi problemi giusto? In altri esempi ho notato anche una certa premura nel creare degli id differenti all'interno di un ciclo.

[Vindav]

L'uso esclusivo delle classi non dovrebbe crearmi problemi giusto?

Direi proprio di no, se devi inviare i dati al server con un submit per recuperare i valori devi usare l'attributo name, forse questo potrebbe crearti problemi visto che sono uguali anche per gli elementi clonati, ma non ne sono sicuro, non conosco a fondo php, forse ti arrivano sotto forma di array.

[Azucchi]

Direi proprio di no, se devi inviare i dati al server con un submit per recuperare i valori devi usare l'attributo name, forse questo potrebbe crearti problemi visto che sono uguali anche per gli elementi clonati, ma non ne sono sicuro, non conosco a fondo php, forse ti arrivano sotto forma di array.

Potrei cavarmela anche con un input di tipo button, il dato da inviare in questione è solo quello del menu3. Inoltre l'inserimento ho intenzione di farlo indipendente dagli altri. Poi vedrò
Grazie nuovamente per l'aiuto

[Azucchi]

E' sorto un problema. Così come e' impostato il codice, alla pressione del bottone di classe "ad" eseguo una copia dell'attuale DOM del div di classe "div_1". L'oggetto clone si porterà dietro le proprietà del div "matrice".

<div id="#contenitore" class="divFORM">
          
         <div class="div_1">
                    <table>
                        <tr>
                            <td>Menu_1</td>
                            <td>
                                <select name="menu1" class="test menu1">
                                <?php
                                
                                include "connessione.php";
                    
                            //FILE DI CONFIGURAZIONE DEL MENU' 1
                                
                                $db = null;
                                ?>
                            </select>
                            
                            </td>
                            <td>Menu_2</td>
                            <td>
                                <select name="menu2" class="test menu2">
                                <?php
                                
                                include "connessione.php";
                    
                            //FILE DI CONFIGURAZIONE DEL MENU' 2                        
                            
                            $db = null;    //chiusura connessione
                                
                                
                                ?>
                            </select>
                            
                            </td>
                        </tr>
                        <tr>
                            <td>menu_3</td>
                            <td>
                                <select name="menu3" class="menu3">
                                <?php
                                
                                ?>
                                </select>                            
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 <input name="add" type="button" value="Aggiungi" class="ad">
                              <input name="rem" type="button" value="Rimuovi" class="rem">
                            </td>
                        </tr>
                   </table>
               </div>             
    </div>

<scripttype="text/javascript">


$(document).ready(function(){
$(".ad").click(function(){
  $(this).parents('.div_1').clone(true).appendTo("#contenitore");
});
});

</script>

Per superare questo ostacolo l'intento è di conservare il markup originale in una variabile Javascript. Da usare come matrice per le future clonazioni. Questo è il codice attuale che pero' mi da i seguenti problemi:
1) L'oggetto clonato non si porta dietro gli eventi collegati alla "matrice". Ad esempio la funzione che popola il menu3.
2) Al click sul bottone "ad" viene eseguita una sola copia.

$(document).ready(function() {   
                                    var markupOriginale = $('.div_1').clone(true);
                                    var countAcc = 0;            

    $(".ad").click(function(){
                              markupOriginale.appendTo('#contenitore');
                             countAcc++;
    });
});

[Azucchi]

Ok, mi sono ricordato il suggerimento di cavicchiandrea

Premesso che:
a) gli id numerici sono sconsigliati
b) gli id devono essere univoci
il secondo button non funziona perché quando carichi il documento non esiste devi associare il click cosi:

$(function () {
  $('body').on('click', '#button', function () {
      var cont = $('#1').html();
      $('#2').append(cont);
  });
});

e usare una classe (vedi b).
Volendo puoi usare clone di jquery

Quindi, così funziona

$(document).ready(function() {
    var markupOriginale = $('.div_1').clone(true);
    var countAcc = 0;        


    //AGGIUNTA
    $('body').on("click", '.ad', function(){


                                          
                                          markupOriginale.clone().appendTo('#contenitore');
                          
                                          countAcc++;
                                      
    });




    //RIMOZIONE 
    $('body').on("click", '.rem', function(){
                                            if (countAcc>0) {
                                                            $(this).parents('.div_1').remove();
                                                                countAcc--;    
                                            }
    });
});

Ora provo a fare la stessa cosa alle funzioni collegate :P

[cavicchiandrea]

Se il clone lo esegui qui

var markupOriginale = $('.div_1').clone(true);

ripeterlo qui

markupOriginale.clone().appendTo('#contenitore');

credo sia inutile

[Azucchi]

Se il clone lo esegui qui

ripeterlo qui

credo sia inutile

Se non lo ripeto mi fa un solo clone o ne vedo solo uno e non capisco il motivo.

[Azucchi]

Se il clone lo esegui qui

ripeterlo qui

credo sia inutile

Ecco una prova, forse sbaglio a richiamare l'oggetto non so.
http://jsfiddle.net/Azucchi/1cog8mkk/6/

[Azucchi]

Ecco una prova, forse sbaglio a richiamare l'oggetto non so.
http://jsfiddle.net/Azucchi/1cog8mkk/6/

Ho trovato soluzione su stackoverflow: http://stackoverflow.com/questions/1...-being-changed.
In particolare: "Elementi clonati utilizzando clone() terranno il riferimento, così invece di aggiungere un nuovo elemento esso andrà ad aggiornare l'elemento precedente".
Quindi le strade sono due: o si utilizza il metodo suggerito o si clona due volte. Secondo voi qual'e' la soluzione migliore?