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

Question

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

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

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

稍后，我将新行添加到此 table 并且需要具有相同功能的新超链接。我正在使用 Prototype 动态创建这些，如下所示：

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

但是，我现在对如何将此元素放入我的 table 并仍然连接事件感到困惑。我可以通过这样做让超链接显示出来：

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>

您可以观察 table 元素，但要注意从 link

中冒出的事件

$('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() 并且无论将什么元素添加到 table 如果它们与 CSS 匹配选择器它会触发处理程序。有时我会偷懒，做 document.on('click','.clickme',function(e,target){}) which watches for clicks at the root document object

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

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

Dynamically add hyperlinks to DOM with pre-wired events?

javascript

prototypejs