4

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

我在这里想念什么？

4

2 回答 2

2

改变

$(this).data('row')

至

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

它似乎解决了这个问题。

小提琴

于 2013-08-09T21:27:15.167 回答
0

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

问题原因：

  • 当你这样做$('.opts:first').clone(true)时，新的克隆对象通过data()方法将数据集传递给原始对象。
  • 然后，您将更改克隆元素的 'data-row' 属性，而不是通过 更改其数据data()，因此 data('row') 保持不变。
  • 而且，在单击 .change 时，您正在使用 data() 方法检索数据，该方法返回数据（未更改），而不是您在上一步中更改的 data-row 属性值。

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

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

于 2013-08-09T22:07:06.463 回答