mootools事件監聽器在element.innerHTML被更改後消失

我將放置一個頁面以顯示一組存儲的值。我正在使用mootools和AJAX調用來更新值，而無需每次用戶從下拉菜單中選擇一個新項目時刷新頁面。mootools事件監聽器在element.innerHTML被更改後消失

的HTML每行看起來像：

<div class="selections"> 
<input class="checkbox selector" type="checkbox" CHECKED /> 

<span class="b_name"> 
    <select class="b_n selector"> 
     <!-- options --> 
    </select> 
</span> 

<span class="b_level"> 

    <select class="b_l selector"> 
     <!-- options --> 
    </select> 

</span> 

<span class="values"> 
    <!-- the values --> 
</span>

在我已成立了事件偵聽器像頭：

$$('.selector').addEvent('change', function(event){changeValues(this);});

我的問題是，當「b_name 「選擇更改我必須更新」b_level「選項中的選項列表。我通過從另一個頁面上的php腳本獲取數據庫中可能的選項列表並替換「b_level」的innerHTML來實現這一目標。一旦我這樣做，附加到「b_l選擇器」的事件偵聽器不再有效。

我試圖通過明確附加事件偵聽器，像這樣以「B_L選擇」每次「b_name」變更來解決這個問題：

row.getElement('.b_l').addEvent('change', function(event){changeValues(row.getElement('.b_l'));});

，其中「行」爲html元素「div.selections」。

它仍然沒有工作，我不知道發生了什麼事情。任何人都可以提供一個關於如何解決這個問題的建議嗎？或者可能是更好的方式來做我正在做的事情。

感謝

來源

2010-04-09 baiano

當您在元素上設置innerHTML，元素的內容被完全清除，並用一組新的元素取代 - 從innerHTML屬性分析的人。舊元素上設置的任何事件都不適用於新元素。

jQuery提供了一個解決這個問題live()事件。我發現一個解決方案here，顯然與mootools相同。

來源

2010-04-09 21:43:50

這可能會工作，但我不明白的代碼，我想堅持的東西這對我來說是有意義的... haha – baiano 2010-04-09 22:08:12

我最終需要使用這個來獲取事件偵聽器來應用到用戶添加的行。它完美的工作，現在如果我只是明白爲什麼。 – baiano 2010-04-10 00:18:46

mootools的最新做法是通過click：relay來實現這一點，下面是我在這裏放置的一個例子：http://www.jsfiddle.net/tgvYb/ - 點擊添加一個新的div到菜單中，該菜單包含事件代理監聽器和它會像以前那樣沒有附加任何新事件。 – 2010-04-10 08:28:09

你的做法是正確的，有可能只是在你的addEvent()代碼中的錯誤。當您替換innerHTML時事件處理程序消失的原因很簡單 - 您正在刪除處理程序所在的元素，因此處理程序也會被刪除。但是您重新添加處理程序的方法應該可行。

我認爲這可能是一個範圍界定問題。如果您引用的div明確，這樣會發生什麼：

row.getElement('.b_l').addEvent('change', function(event){ 
{ 
    changeValues($$('div.selections .b_l')); 
});

來源

2010-04-09 21:44:07 zombat

這是有道理的。我改變了我的代碼，以便它只替換選項而不是選擇容器元素，現在它可以工作。謝謝 – baiano 2010-04-09 22:09:00

這是JavaScript的是如何工作的，這是不是一個錯誤。

你需要使用什麼是元素代表團 - 你附加一個事件的父元素，在同一時間，指定該事件應該授予的元素。

下面是動作元素代表團的基本的例子：http://jsfiddle.net/oskar/ENR3E/

而且文檔：http://mootools.net/docs/more/Element/Element.Delegation

來源

2010-04-09 22:23:47

請注意，MooTools More當前實現的委託不支持表單事件，因爲這些事件不會冒泡（並且MooTool 1.2不允許您使用捕獲選項）。 – Anutron 2010-04-11 00:37:06

你可能想試試這個替代的授權插件：http://mootools.net/forge/p/better_event_delegation 它目前比MooTools附帶的更好。 – 2010-04-11 22:14:26

mootools事件監聽器在element.innerHTML被更改後消失

回答

相關問題