jquery克隆html问题，更新DOM？ [英] jquery cloning html problem, update DOM?

问题描述

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

I need help of javascript / jquery experts to solve the next problem:

---- 1. 此javascript 在select html标签中提醒所选选项的ID：

---- 1. this javascript alerts the id of a selected option in a select html tag:

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

---- 2。 此JavaScript 克隆html代码：

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

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代码的一部分，并且它没有问题

---- this is a part of the HTML code that JS is cloning, and it works with no problems

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

只是javascript＃1与初始html代码（克隆的原始版本）配合使用。克隆的其他人不会警告选定的选项。我已经用differents id的attrs测试了每个克隆的选择标签，没有结果。

BUT just the javascript #1 works with the initial html code (original for clone). the cloned others doesnt alert selected options. I've tested with diferents id's attrs for each cloned select tags, without results.

什么im丢失？ firebug显示克隆的html DOM nice：S我必须在克隆之后更新DOM才能使$（＃id productos list）。change（...）可以工作？

What im missing? firebug display the cloned html DOM nice :S Do I have to update DOM after cloning to make $("#id productos list").change(...) works?

推荐答案

jQuery $（＃...）语法将按照准确的id返回第一个匹配的元素。如果您是克隆元素，但不区分它们的ID，则此代码将无法正常工作。

The jQuery $("#...") syntax will return the first matched element by exact id. If you are cloning elements but not differentiating them by their id, this code will not work as you expect it to.

您可以比较以下两个表达式之间的差异：

You can compare the differences between the following two expressions:

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

...和

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

根据id为id_productos_list的元素的存在，第一个表达式将返回0或1在你的页面声明顺序的第一个元素胜出。

The first expression will return either zero or one depending on the presence of an element with id "id_productos_list" in your page. The first element in declared order wins.

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

The second expression will return zero or one or more depending on the the set of all elements with id "id_productos_list" in your page.

同样重要的是要注意，事件处理程序不会被复制到 clone（）操作。您可能需要将这些处理程序重新分配给新的元素。

Also important to note is that it doesn't appear that the event handlers are copied over as part of the clone() operation. You may need to reassign these handlers to the new elements.

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

这篇关于jquery克隆html问题，更新DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！