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

Question

我在 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 关联到元素

有没有其他方法可以做到这一点？

Answer 1

您可以使用$.data()insidegetNewDiv()来存储参考索引：

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");
});

Answer 2

.on允许您进行事件委托：

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