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- *，但这会限制我使用简单数据类型
$。与元素相关的数据

还有其他方式吗？

Answer 1

您可以使用$.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");
});

Answer 2

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

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

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

2 个答案: