將Javascript事件處理程序綁定到Ajax HTML響應？

比方說，我有以下的HTML代碼將Javascript事件處理程序綁定到Ajax 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響應事件處理程序的有效方法？

來源

2010-04-25 John

我想如果你使用的是像jQuery這樣的JavaScript框架，他們通過.live（）功能將它整理出來，除非你想自己組裝一個 – Sunny 2010-04-25 14:19:39

您可以使用類似jQuery live之類的東西。它可讓您將事件處理程序綁定到現在和將來與選擇器匹配的元素。

來源

2010-04-25 14:18:29

請注意.live（）從1.7開始不推薦使用 – KevinManx 2012-09-03 13:44:33

本諾蘭做了一個很好的框架，曾被稱爲「行爲」。他已經放棄了，但這個想法依然健全。這個想法是把你的事件處理程序放在使用CSS選擇器命名的屬性下的「表單」（只是JavaScript對象）。

你可以使用一個對象像這樣：

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

的通用功能，可以重複這樣一個對象的屬性在必要時重新事件處理程序。

我有一個行爲的舊副本存儲在這裏：http://www.kruse-net.dk/javascript/lib/behaviour-1.2.js，你可以自由地從中吸取靈感或使用。

來源

2010-04-25 14:24:07

感謝您的鏈接，有趣的代碼... – Sunny 2010-04-25 14:27:00

將Javascript事件處理程序綁定到Ajax HTML響應？

回答

相關問題