1

n 個の行でイベント委任を使用しています。以前のアプローチでは、各行をイベントにバインドしていましたが、コードは次のようになりました。

function getDiv (data) {
    var div = $("<div class='theDiv'>");

    div.click(function () {
        console.log(data);
    });

    return div;
}

function getContainer() {
    var i, container;

    container = $("<div class='container'></div>");
    for (i = 0 ; i < 1000 ; i++) {
        container.append(getDiv(i));
    }
    return container;
}

$("body").append(getContainer());

注: このアプローチでは、各行要素 ( theDiv) がそれぞれのデータにアクセスできます。

問題は、シングルクリックをバインドしcontainerてデータにアクセスしたいということです。イベント委任のアプローチは次のようになります。

function getNewDiv (data) {
    var div = $("<div class='theDiv'>");

    return div;
}

function getNewContainer() {
    var i, container;

    container = $("<div class='container'></div>");
    for (i = 0 ; i < 1000 ; i++) {
        container.append(getNewDiv(i));
    }

    container.click (function (e) {
        var targetElem = e.target;
        console.dir(e);
        if ($(targetElem).hasClass("theDiv")) {
            console.log("row was clicked");
        }
    })

    return container;
}

$("body").append(getNewContainer());

では、各行に関連付けられたデータにアクセスする方法は?

私の学習によると、データを追加できます

  • data-*、しかしこれは私を単純なデータ型に制限します
  • 要素に関連付けられた $.data

これを行う他の方法はありますか？

4

2 に答える 2

0

.onイベント委任を行うことができます:

container.on('click', '.theDiv', function () {
    //`this` is `.theDiv`.
});
于 2013-02-15T06:15:42.907 に答える
0

$.data()内部を使用getNewDiv()して、参照インデックスを保存できます。

function getNewDiv (dataIndex) {
    return $("<div class='theDiv'>").data('idx', dataIndex);
}

次に、各要素のデータ インデックス変数を使用して、大量のデータ配列内のオブジェクトを参照します。

var mydata = [{ ... }, { ... }, { ... }];

container.on('click', '.theDiv', function () {
    var data = mydata[$(this).data('idx')];
    console.log("row was clicked");
});
于 2013-02-15T06:21:29.163 に答える