javascript - 使用事件委托(delegate)时如何访问与元素关联的数据

Question

我在 n 行上使用事件委托(delegate)，我的旧方法是将每一行与事件绑定(bind)，代码如下所示:

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) 都可以访问其数据。

现在的问题是，我想绑定(bind)对容器的单击并访问数据，事件委托(delegate)方法如下所示:

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

还有其他方法吗？

Answer 1

.on 允许您进行事件委托(delegate):

container.on('click', '.theDiv', function () {
    //`this` is `.theDiv`.
});