Question

假设我有以下HTML代码

<div id="outer">
<div id="inner">Hello World</div>
</div>

在我的HTML页面的末尾，我使用javascript来附加事件处理程序，如此，

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}
document.getElementById('outer').onclick = function() {
/* An Ajax Call where the response, which will be a string of HTML content, then goes into document.getElementById('outer').innerHTML */

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}

}

在上面的代码中，我期待<div id="inner">Hello World 2</div>回来，这需要我重新附加onclick事件处理程序。这是有道理的，因为返回的新响应只是一个字符串，我必须告诉浏览器在转换为DOM后，我还需要一些事件处理程序

所以我的问题是，有没有更好的方法来管理包含HTML内容的AJAX响应的事件处理程序？我可以在html响应中使用内联javascript，但它阻止我实现非侵入式javascript。那么有没有办法实现非侵入式javascript和一种“维护”ajax html响应事件处理程序的有效方法？

Answer 1

您可以使用jQuery live之类的内容。它允许您将事件处理程序绑定到现在和将来与选择器匹配的元素。

Answer 2

Ben Nolan做了一个名为“行为”的好框架。他已经抛弃了它，但这个想法仍然是合理的。我们的想法是将您的事件处理程序放在使用CSS选择器命名的属性下的“工作表”（只是javascript对象）中。

您可以使用如下对象：

{
    '#inner': function() { ... }
}

一般功能可以在需要重新应用事件处理程序时迭代此类对象的属性。

我有一个旧的行为副本存储在这里：http://www.kruse-net.dk/javascript/lib/behaviour-1.2.js你可以自由地从中汲取灵感或使用它。

将Javascript事件处理程序绑定到Ajax HTML响应？

2 个答案: