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

[Azucchi]

$(function () {
  $('#bottone').click( function () {
      $('#2').clone(true, true).appendTo("#1");
  });
});

Il problema è che nella form ho 3 menu', 2 che filtrano i risultati del terzo. Le copie non riconoscono la funzione ajax che va a popolare il terzo menù.

<script type="text/javascript">


$(document).ready(function() {
//al cambiamento dello stato di una delle due 


       
$('body').on('click', '.menuclass', function(){ //procedura che permette di riconoscere il cambiamento di stato all'interno della select
           
           var menu1 = $("#idmenu1").val();
         
           var menu2 = $("#idmenu2").val();
         
                                                   
              $.ajax({
                  type: "POST",
                      url: 'search.php',
                       data: 'menu1=' + menu1 + '&menu2=' + menu2, 
                       success: function(data)
                                               {                                
                                                 $('#menu3').html(data);   //errore?
                                             }
                  });
    });
});

[Vindav]

gli eventi associati vengono riconusciti per forza, perche al metodo clone ho detto di applicare anche gli eventi associati(pasando come parametro true,true), il problema molto probabilmente è dovuto al fatto che avendo una copia esatta del form hai anche duplicato i vari id. Ma come ben saprai in una pagina non devono esistere due elementi con id uguale.

[Azucchi]

gli eventi associati vengono riconusciti per forza, perche al metodo clone ho detto di applicare anche gli eventi associati(pasando come parametro true,true), il problema molto probabilmente è dovuto al fatto che avendo una copia esatta del form hai anche duplicato i vari id. Ma come ben saprai in una pagina non devono esistere due elementi con id uguale.

Ma se il metodo clone duplica gli id quindi non posso usarlo nel mio caso giusto? Da quello che ho capito dovrei fare una cosa simile: http://www.sanwebe.com/2013/03/addre...y-with-jquery#
Assegnare gli id dinamicamente e di conseguenza modificare la funzione ajax

[cavicchiandrea]

Ma se il metodo clone duplica gli id quindi non posso usarlo nel mio caso giusto?

Si

Da quello che ho capito dovrei fare una cosa simile: http://www.sanwebe.com/2013/03/addre...y-with-jquery#
Assegnare gli id dinamicamente e di conseguenza modificare la funzione ajax

SI

[Azucchi]

Grazie mille, almeno ho una rotta. Ci sarà da sputare sangue dato il mio livello

[Vindav]

puoi anche usare il metodo clone ma prima di appedere l'oggetto clonato devi modificare l'id:

 var cloneObj = $('#2').clone(true, true);
 cloneObj.attr("id", "newId");
 cloneObj.appendTo("#1");

devi cmq riscrivere la chiamata ajax per renderla "dinamica", cioè che funzioni anche se richiamata dagli oggetti clonati.

[Azucchi]

puoi anche usare il metodo clone ma prima di appedere l'oggetto clonato devi modificare l'id:

 var cloneObj = $('#2').clone(true, true);
 cloneObj.attr("id", "newId");
 cloneObj.appendTo("#1");

devi cmq riscrivere la chiamata ajax per renderla "dinamica", cioè che funzioni anche se richiamata dagli oggetti clonati.

Il mio div ha all'interno vari input ognuno con il proprio id. Immagino non basti cambiare l'id del div, ma anche quello degli input in esso contenuti, giusto?
P.S. se avete qualche libro di teoria da consigliarmi è bene accetto :P

[Vindav]

ma anche quello degli input in esso contenuti, giusto?

direi proprio di si. Ti consiglio cmq di usare le classi al posto degli id, le classi possono essere ripetute piu volte nella pagina. Inoltre anche usando le classi in qualunque funzione puoi sapere quel'è l'elemento che ha scatenato l'evento usando this.
Prendi questo esempio:

<div id="1"> 
    <div id="2"> 
<input type="text" class="oText" value="pippo"/>
    </div>
  </div>
  <input type="button" id="clona" value="clona"/>
  <div id="container"></div>

$("#clona").click(function(){
  $("#2").clone(true, true).appendTo("#1");
});

$(".oText").change(function(){
  $("#container").html($(this).val());
});

Non ho dovuto modificare nulla dell'oggetto clonato, e non ho duvuto ridefinire la funzione perche l'evento è associato a tutti gli elementi con class oText, che sia il campo di testo originale o un campo clonato. Sapendo quel'è l'elemento che ha scatenato l'evento puoi (probabilmente con un po di traversing del DOM) iniziare a scrivere un metodo generalizzato, cioè che non faccia riferimento ad elementi fissi dell'html come nel tuo caso.

[Azucchi]

direi proprio di si. Ti consiglio cmq di usare le classi al posto degli id, le classi possono essere ripetute piu volte nella pagina. Inoltre anche usando le classi in qualunque funzione puoi sapere quel'è l'elemento che ha scatenato l'evento usando this.
Prendi questo esempio:

<div id="1"> 
    <div id="2"> 
<input type="text" class="oText" value="pippo"/>
    </div>
  </div>
  <input type="button" id="clona" value="clona"/>
  <div id="container"></div>

$("#clona").click(function(){
  $("#2").clone(true, true).appendTo("#1");
});

$(".oText").change(function(){
  $("#container").html($(this).val());
});

Non ho dovuto modificare nulla dell'oggetto clonato, e non ho duvuto ridefinire la funzione perche l'evento è associato a tutti gli elementi con class oText, che sia il campo di testo originale o un campo clonato. Sapendo quel'è l'elemento che ha scatenato l'evento puoi (probabilmente con un po di traversing del DOM) iniziare a scrivere un metodo generalizzato, cioè che non faccia riferimento ad elementi fissi dell'html come nel tuo caso.

Grazie mille per la disponibilità . Il quadro piano piano va a comporsi, ora butto un po' di codice. Al prossimo aggiornamento

[Azucchi]

<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>

Aggiunta

<script type="text/javascript">


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

</script>

Rimozione

<script type="text/javascript">


$(document).ready(function() {
$('.rem').click( function(){
  $(this).parents('.div_1').remove();
});
});


</script>

Ora devo sistemare la funzione AJAX per popolare il terzo menù. Credo che i problemi siano dove stanno gli ****. Non mi è molto chiaro l'uso del this e di questo tipo di selettori.

<script type="text/javascript">


$(document).ready(function() {
       
$('.test').change(function(){
           
           var idmenu1 = $(".menu1").val(); ****
           var idmenu2 = $(".menu2").val(); ****
                                                   
              $.ajax({
                  type: "POST",
                      url: 'search.php',
                       data: 'idmenu1=' + idmenu1 + '&idmenu2=' + idmenu2, 
                       success: function(data)
                                           {
                                             $('.menu3').html(data); ****
                                                                 }
                  });
    }).change();
});
        
</script>