javascript - jQuery中动态生成元素内动态生成元素的事件绑定

Question

我正在尝试在动态生成的 DOM 上使用“点击”。我知道我可以只使用 live 或 on，但是我的动态生成的内容在多个动态生成的内容中，并且 live/on 不再有效。

所以我的代码看起来像这样，但在 El_b 之前有更多元素：

El_a = document.createElement("li");
El_b = document.createElement("a");
El_b.id = "myEl";
El_a.appendChild(El_b);

有没有办法使这项工作？

PS：我也试过 livequery jQuery 插件。

score 1 · Accepted Answer

如果你想在 El_b 上的 click 事件上绑定一个函数，你可以这样做：

$(El_b).click(function() {
    // Your code here
});

但你可以使用on我认为。即使您创建了多个 DOM 元素。您可以使用document或body。例子：

$('body').on('click', 'li a.my_class', function() {
    // Your code here
});

score 1 · Accepted Answer

就委托而言，您始终至少有一个可用的静态 DOM 元素，即document. 如果您找不到更接近的元素来委托，请委托给这个。

但是，这里似乎不需要委托。创建元素和附加监听器的整个过程可以浓缩为：

var a = $("<li/>").append($("<a/>").attr("id", "myElement")).click(function () {
    alert('hello');
});

如果，如您所说，您无法更改对象创建，您仍然可以通过其 ID 选择它并附加侦听器：

$('#myElement').click(function () {
    alert('hello');
});

此外，这些是文档片段，不是真正的文档，当然也不是 DOM。

2 回答 2