jQuery - 给动态元素附加事件

Question

我已经阅读了.on文档，但其中有一个漏洞

以下是HTML代码：

<a href="#" class="add-new">make new row</a>

<ul>
    <li class="opts" >
        <select class="change" href="#" data-row="1">
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
    </li>
</ul>

这是 JavaScript 代码：

 var index = 2;
 $('.add-new').on('click',function(e) {

     e.preventDefault();

     $('.opts:first').clone(true).insertAfter('.opts:last');
     $('.opts:last select').attr("data-row", index);

     index++;

 });

 $(document).on('click', '.change', function(e) {

     e.preventDefault();

     console.log($(this).data('row'));

 });

如果我动态生成行，新元素就可以与.on事件配合使用。
但如果更改第一个元素并添加更多的新元素，则新的元素会触发事件。
现在它们表现得好像是第一个元素一样。
这里有一个例子：http://jsfiddle.net/BgAsY/2/
添加一或两行，然后更改除第一个选择外的任何一个选择。
当这些被更改时，控制台显示正确的相应数字。
现在再添加几行并更改这些新的选择。
一切都还好，但现在要更改第一个选择，添加更多行，然后更改那些最新的选择。
控制台现在总是显示1，好像它认为这些最新的行是第一行一样。
我在这里错过了什么？

- Chad Smith

Answer 1

改变

$(this).data('row')

to

$(this).attr('data-row')

看起来它解决了这个问题。

FIDDLE

- adeneo

---

我错误地认为它们是相同的。感谢Adeneo和Jithesh的答案。 - Chad Smith

Answer 2

使用console.log($(this).attr('data-row'));替换console.log($(this).data('row'));

问题的原因：

• 当你执行$('.opts:first').clone(true)时，新克隆的对象通过data()方法携带了原始对象的数据
• 然后你改变了克隆元素的"data-row"属性，而不是通过data()更改其数据，因此data('row')保持不变。
• 并且，在点击.change时，你正在使用data()方法检索数据，它返回的是未更改的数据（而不是你在最后一步中更改的data-row属性值）。

$(elm).data('row')与$(elm).attr('data-row')不同

这里是工作的fiddle: http://jsfiddle.net/BgAsY/12/

- Jithesh