javascript - 使用预连线事件动态添加超链接到 DOM？

Question

我有一个表格，其中一列包含一个超链接。页面加载时，已经填充了许多行，我正在枚举该数组并连接每个超链接上的单击事件:

$$("a[id^=remove]").each(function (item) {
    item.observe("click", removeDevice);
});

这部分有效；单击超链接会运行 removeDevice 方法，其中包括一个 Event.stop 调用以防止超链接导航离开。

后来，我向该表添加新行，并且需要具有相同工作方式的新超链接。我使用 Prototype 动态创建这些，如下所示:

var remove = new Element("a", { id: "remove-{SerialNumber}".interpolate(device), href: "/Home/Javascript" })
    .update("Remove")
    .observe("click", removeDevice);

但是，我现在不知道如何将此元素放入我的表中，并且仍然连接事件。我可以通过这样做来显示超链接:

newRow.insert({ bottom: new Element("td").update(remove.outerHTML) });

但是，正如您可能怀疑的那样，这些事件在这里不再起作用。有没有办法直接添加元素，保留我已连接的事件？

Answer 1

我过去也做过同样的事情，并且必须弄清楚如何使用事件传播来观察父级的事件，以便所有元素(动态或其他)触发我的处理程序

使用数据行示例

<table id="clickablerows">
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr>
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr>
    <tr><td><a href="javascript:void(0);">Don't Click Me</a></td></tr>
</table>

您可以观察表格元素，但要注意从链接中冒出的事件

$('clickablerows').on('click','.clickme',function(e,target){
    // e is the Event object
    // `this` is the <table> element
    // target is the element that matches the CSS selector (2nd parameter)

});

以这种方式连接，您只有一个观察者，而不是许多观察者执行 $$().each() 并且无论将哪些元素添加到表中(如果它们与 CSS 匹配)选择器它会触发处理程序。有时我会偷懒，执行 document.on('click','.clickme',function(e,target){}) 来监视根文档对象的点击

警告:有些事件不会像焦点或模糊那样冒泡，请检查 MDN 以查看您要使用的事件是否会冒泡到父元素。