jQuery克隆html，更新DOM？

Question

我需要 Javascript/jQuery 专家的帮助来解决下一个问题：

---- 1. this Javascript 提醒 select html 标记中选定选项的 id：

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

----2。 this Javascript克隆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);
}

----这是JS正在克隆的HTML代码的一部分，它可以正常工作

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

但只有 Javascript #1 与初始 html 代码（原始用于克隆）一起工作。克隆的其他人不会提醒选定的选项。我已经为每个克隆的选择标签测试了不同的 id 属性，没有结果。

我错过了什么？ Firebug 显示克隆的 html DOM 很好：S 克隆后我是否必须更新 DOM 才能使 $("#id productos list").change(...) 工作？

Answer 1

jQuery $("#...") 语法将通过确切的 id 返回第一个匹配的元素。如果您正在克隆元素但没有通过它们的 id 来区分它们，那么这段代码将不会像您期望的那样工作。

您可以比较以下两种表达方式的区别：

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

...和

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

第一个表达式将返回 0 或 1，具体取决于页面中是否存在 id 为“id_productos_list”的元素。声明顺序中的第一个元素获胜。

第二个表达式将返回零或一个或多个，具体取决于您页面中 ID 为“id_productos_list”的所有元素的集合。

另外需要注意的是，事件处理程序似乎不会作为clone() 操作的一部分被复制。您可能需要将这些处理程序重新分配给新元素。

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

Answer 2

您是否尝试过 .clone(true) 克隆所有附加的处理程序？在Clone documentation底部有描述。