jquery clonage problème html, mise à jour DOM?

Question

je besoin d'aide de javascript/experts jquery pour résoudre le problème suivant:

---- 1. this javascript avertit l'id d'une option sélectionnée dans une sélection de balise html:

$(function(){ 
    $("#id_productos_list").change(
    function(){ 
     var op = $(this).selectedValues() 
     alert(op); 
    } 
    ); 
}); 

--- -2. this javascript clone code html:

function cloneMore(selector, type) { 
    var newElement = $(selector).clone(); 
    var total = $('#id_' + type + '-TOTAL_FORMS').val(); 

    newElement.find(':input').each(function() { 
     var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); 
     var id = 'id_' + name; 
     $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); 
    }); 
    newElement.find('label').each(function() { 
     var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); 
     $(this).attr('for', newFor); 
    }); 

    total++; 
    $('#id_' + type + '-TOTAL_FORMS').val(total); 
    $(selector).after(newElement); 
} 

---- c'est une partie du code HTML que JS est le clonage, et cela fonctionne sans problème

  <select id="id_productos_list" name="productos_list" > 
       <option value="1">One</option> 
       <option value="2">Two</option> 
      </select> 

mais juste le javascript # 1 fonctionne avec le code html initial (original pour cloner). les autres clonés n'alertent pas les options sélectionnées. J'ai testé avec différents attributs d'identifiants pour chaque étiquette clonée, sans résultats.

Qu'est-ce que je manque? firebug affiche le DOM html cloné nice: S Dois-je mettre à jour DOM après le clonage pour faire $ ("# id productos list"). change (...) fonctionne?

Answer 1

La syntaxe jQuery $("#...") renvoie le premier élément correspondant par son identifiant exact. Si vous clonez des éléments mais ne les différenciez pas par leur identifiant, ce code ne fonctionnera pas comme prévu.

Vous pouvez comparer les différences entre les deux expressions suivantes:

alert($("#id_productos_list").size()); 

... et

alert($("[id='#id_productos_list']").size()); 

La première expression renvoie zéro ou un en fonction de la présence d'un élément avec id "id_productos_list" dans votre page. Le premier élément dans l'ordre déclaré gagne.

La deuxième expression renverra zéro ou un ou plusieurs en fonction de l'ensemble de tous les éléments avec l'id "id_productos_list" dans votre page.

Il est également important de noter qu'il ne semble pas que les gestionnaires d'événements soient copiés dans le cadre de l'opération clone(). Vous devrez peut-être réaffecter ces gestionnaires aux nouveaux éléments.

var newElement = $(selector).clone(true); 

Answer 2

Avez-vous essayé .clone(true) qui clone tous les gestionnaires attachés? Il est décrit au bas de la Clone documentation.