使用预先连接的事件向DOM动态添加超链接

Dynamically add hyperlinks to DOM with pre-wired events?

本文关键字：DOM 动态 添加 超链接 事件 连接      更新时间：2024-04-27

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

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

但是，正如你可能怀疑的那样，这些事件在这里已经不起作用了。有没有一种方法可以直接添加元素，保留我连接的事件？

我过去也做过同样的事情，必须弄清楚如何使用事件传播来观察父级的事件，这样所有元素（动态或其他）都会触发我的处理程序

使用数据行的示例

<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，看看您要使用的事件是否会冒泡到父元素

相关文章：