載入頁面引起。對（「點擊」）停止運行

所以我有我加載與AJAX頁面，這樣的頁面：載入頁面引起。對（「點擊」）停止運行

<script> 
$(document).ready(function(e){ 
    console.log('binding clickable'); 
    console.log($('#clickable').length); 
    $('#clickable').off(); 
    $('#clickable').on('click',function(){ 
     console.log('hello'); 
    }); 
}); 
</script> 
<h1>New Page</h1> 
<p>Blah blah blah...</p> 
<div class="button" id="clickable">OK</div>

所以，當我加載此它與AJAX頁面工作正常。

當我加載此頁面，然後加載另一個頁面，然後再次加載此頁面時，它工作正常。

但是，當我加載此頁面，然後再次加載此頁面 - #clickable按鈕不再有效。

當我在控制檯上看時，我可以看到binding clickable，所以$(document).ready()函數正在運行正常。在控制檯下面，我可以看到號碼1，所以我知道jQuery選擇器'#clickable'正在查找DOM元素。

我添加了行$('#clickable').off()，以防事件綁定到DOM元素兩次。但是這沒有幫助。

我使用標準的$.ajax({type:'GET',dataType:'text'});調用來加載頁面，這段代碼工作正常。問題不在於我們如何通過AJAX加載頁面，問題是頁面加載兩次導致.on('click')函數停止工作。

我們已經使用PHP來隨機字符串添加到該按鈕標籤id和jQuery選擇年底解決了這個問題，所以我使用的每個頁面加載相同的選擇的問題假設，但我希望有更多知識的人可以對這種情況有所瞭解。

有人可以向我解釋爲什麼第二次加載頁面會阻止按鈕被點擊嗎？

來源

2014-02-07 Jimmery

嘗試事件委託，語法是'''$（「身體」）。在（「點擊」，「#clickable」，function（event）{/ * do something * /}）;''，more info：http://api.jquery.com/on/#direct-and-delegated-events – Varinder

@Varinder many謝謝 - 看着這個並使用它已經爲我工作了！把這個作爲答案，我會標記你是正確的！ – Jimmery

哦，很酷，謝謝你:) – Varinder

嘗試事件委託，語法是：

$("body").on("click", "#clickable", function(event) { /*do something*/ });

更多信息here

來源

2014-02-07 12:47:15 Varinder

載入頁面引起。對（「點擊」）停止運行

回答

相關問題