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 つまたは 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-row 属性値ではなく、データ (変更されていない) を返す data() メソッドを使用してデータを取得しています。

$(elm).data('row') は $(elm).attr('data-row') と同じではありません

これが実際のフィドルです: http://jsfiddle.net/BgAsY/12/

于 2013-08-09T22:07:06.463 に答える