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，就像它认为那些最新的行是第一行。

我在这里缺少什么？

Answer 1

更改

$(this).data('row')

到

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

似乎解决了这个问题。

FIDDLE

Answer 2

将console.log($(this).data('row'));替换为console.log($(this).attr('data-row'));

问题原因：

执行$('.opts:first').clone(true)时，新克隆对象通过data()方法将数据集载入原始对象
然后您要更改克隆元素的'data-row'属性，而不是通过data()更改其数据，因此数据（'row'）保持不变。
并且，在点击.change时，您将使用data（）方法检索数据，该方法返回数据（未更改），而不是您在上一步中更改的数据行属性值。

$（elm）.data（'row'）与$（elm）.attr（'data-row'）不一样

这是工作小提琴：http://jsfiddle.net/BgAsY/12/

jQuery - 将事件附加到动态元素

2 个答案: