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

2023年4月21日 193次阅读

我已阅读.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,就像它认为那些最新的行是第一行.

我在这里错过了什么？

最佳答案 更改

$(this).data('row')

至

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

它似乎解决了这个问题.

FIDDLE

点赞