我在表格上有编辑或删除元素的链接，这些元素可以被过滤。我使用 ajax 和 get 函数过滤并得到结果。之后我使用inner.html在表格上添加（显示）结果，这里的问题是过滤元素上的链接后不起作用，导致具有这样的dojo功能
dojo.ready(function(){
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
我需要过滤后触发事件，有什么想法吗？
【问题讨论】：
（我假设您在这里使用的是 Dojo
快速回答是您需要将dojo.ready 中的代码提取到一个单独的函数中，并在Ajax 调用的load() 回调结束时调用该函数。例如，制作一个这样的函数：
var attachDeleteEvents = function()
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
};
然后您在 dojo.ready 和您的 Ajax 调用完成时调用此函数：
dojo.ready(function() { attachDeleteEvents(); });
....
var filter = function(someFilter) {
dojo.xhrGet({
url: "some/url.html?filter=someFilter",
handleAs: "text",
load: function(newRows) {
getTableBody().innerHTML = newRows;
attachDeleteEvents();
}
});
};
这是一个快速的答案。您可能想要研究的另一件事是事件委托。上面代码中发生的情况是每一行都有一个 onclick 事件处理程序。您也可以在表本身上有一个事件处理程序。这意味着在过滤表时无需将事件处理程序重新附加到新行。
在最新版本的 Dojo 中，您可以从 dojo/on 获得一些帮助 - 类似于：
require(["dojo/on"], function(on) {
on(document.getElementById("theTableBody"), "a:click", function(evt) {...});
这将是整个表格主体上的单个事件处理程序，但您的事件侦听器只会在点击 <a> 元素时被调用。
因为（我假设）您使用的是 1.5 或更低版本，所以您必须做一些不同的事情。我们仍然只会为整个表格主体获取一个事件侦听器，但我们必须确保我们自己只对<a>（或子元素）的点击采取行动。
dojo.connect(tableBody, "click", function(evt) {
var a = null, name = null;
// Bubble up the DOM to find the actual link element (which
// has the data attribute), because the evt.target may be a
// child element (e.g. the span). We also guard against
// bubbling beyond the table body itself.
for(a = evt.target;
a != tableBody && a.nodeName !== "A";
a = a.parentNode);
name = dojo.attr(a, "data-yourapp-name");
if(name && confirm("Really delete " + name + "?")) {
alert("Will delete " + name);
}
});
【讨论】：