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

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

本诺兰做了一个很好的框架，曾被称为“行为”。他已经放弃了，但这个想法依然健全。这个想法是把你的事件处理程序放在使用CSS选择器命名的属性下的“表单”（只是JavaScript对象）。

你可以使用一个对象像这样：

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

的通用功能，可以重复这样一个对象的属性在必要时重新事件处理程序。

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