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

我正在嘗試使用MooTools來實現此任務。MooTools事件監聽器在element.innerHTML更改後消失

描述：

我附加一個事件監聽器myButton鏈路。點擊此鏈接會啓動一個AJAX請求，並根據回覆文本更新myDiv內容。

在此請求的POST變量被髮送到「button.php」，但它不是目前使用..
（我希望以後使用它）

確定，因此，myDiv得到完全具有相同ID（myButton）+一個隨機數的相同鏈接，以便我們可以看到每次點擊都會生成一個新號碼。

問題：

首次點擊後，在myButton，正確myDiv更新，呈現出一個隨機數。當我第二次點擊myButton（這次是新更新的div）時，div不再刷新。

請注意，我需要myButton在裏面myDiv和myDiv必須更新，每次點擊後（刷新），而不必刷新整個頁面。

有人可以告訴我如何基於這個簡化的代碼示例來實現這個任務嗎？

的index.html

<html> 
<head> 
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script> 
<script> 
window.addEvent('domready', function() { 
    $('myButton').addEvent('click', function(e) { 
    e.stop(); 
    var myRequest = new Request({ 
     method: 'post', 
     url: 'button.php', 
     data: { 
     action : 'test' 
     }, 
     onRequest: function() { 
     $('myDiv').innerHTML = '<img src="images/loading.gif" />'; 
     }, 
     onComplete: function(response) { 
     $('myDiv').innerHTML = response; 
     } 
    }); 
    myRequest.send(); 
    $('myButton').removeEvent('click'); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="myDiv"> 
    <a id="myButton" href="#">Button</a> 
    </div> 
</body> 
</html>

button.php

<a id="myButton" href="#">Button</a> clicked <?php echo rand(1,100); ?>

來源

2010-05-17 acoder

+1用於顯示代碼，描述意圖*和*描述錯誤的行爲（除'不起作用'外）。 – 2010-05-17 22:32:09

查看Element.Delegation一次性在myDiv容器上設置事件，因此每次更新內容時都不必重新附加處理程序。你需要在腳本中包含這個MooTools-More擴展，因爲它不是核心的一部分，但是將從1.3版本開始。

$("myDiv").addEvent("click:relay(a)", function() { 
    ... 
);

如果您有多個<a>環節裏面，您只需要委派的一個特定子集，添加一個類或者一些其他財產來區分它們。您幾乎可以使用relay(..)中的任何選擇器。比方說，所有的鏈接必須加入其中一類updateTrigger：然後

<a class="updateTrigger" id="myButton" href="#">Button</a>

語法是：

$("myDiv").addEvent("click:relay(a.updateTrigger)", function() { 
    ... 
});

看到這個working example其中鏈接每5秒更換。 myDiv容器上只有一個事件設置，它可以處理所有的點擊，即使是動態的也是如此。

來源

2010-05-18 00:44:00 Anurag

它完美地工作。非常感謝你！ – acoder 2010-05-20 09:54:28

您的事件附着到要更換的元件。 dom無法知道對你而言，舊的和新的按鈕是相同的。舊按鈕被刪除（以及與之相關的事件監聽器）和新建的按鈕。所以你需要重新將事件附加到新的按鈕。

這就是說：爲什麼按鈕必須在div內？頭腦非常混亂。您可以隨時更新JavaScript中的按鈕文本，無需替換它並繼續創建新的偵聽器對象。

來源

2010-05-17 22:26:36

如果你只是想要顯示加載的東西，添加一個div，其中包含加載圖像，並切換它的可見性 – 2010-05-17 22:28:18

MooTools似乎有什麼類似於jQuery「委託」。 – Pointy 2010-05-17 22:38:34

我希望按鈕位於div內部，因爲我需要爲此特定目標在此div中放置更多按鈕。這些按鈕將被稱爲ex。「添加」，「編輯」，「刪除」。他們每個人都會將特定的功能加載到這個div中。 – acoder 2010-05-17 22:59:07

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

回答

相關問題