jQuery克隆html，更新DOM？

Posted 2023-02-23

【中文标题】jQuery克隆html，更新DOM？

【英文标题】：jQuery cloning html, update the DOM?

【发布时间】：2010-11-28 15:42:48

【问题描述】：

我需要 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(...) 工作？

【参考方案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);

【讨论】：

我做了一个实验，原来的option标签是克隆出来的option标签是 jQuery选择器是：$("#id_productos_list “）。改变（...）。不同的 id 可以吗？但不，不提醒什么。

@panchicore：我不相信更改处理程序被克隆到新元素。您可能必须明确添加它。

获胜者提示：“您可能需要将这些处理程序重新分配给新元素。”解决方案很简单，只需将 true 添加到克隆方法： var newElement = $(selector).clone(true);谢谢大卫安德烈斯。 +9999

@panchicore：谢谢，我知道了要点，但我觉得 jgeewax 更快地为您提供了完整的课程。所以，如果你必须给予信任......

@David Andres：令人尴尬的情况，但由于您的提示，我花费了 goggle-research 并在 jquery API 文档中很快找到了它。你有最后一句话.....说什么？

【参考方案2】：

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