AJAX請求後刷新jQuery代碼

比方說，我有一些按鈕在點擊時調用AJAX請求。AJAX請求後刷新jQuery代碼

$(document).ready(function(){ 
    $('button').each(function() { 
     $(this).click(function() { 
        alert('Clicked.'); 
      // ...AJAX request... 
     }); 
    }); 
});

當我點擊一個按鈕，一切工作正常。

但是，如果我加載一個AJAX請求的按鈕，然後點擊它們，上面的代碼停止工作。

我該如何擺脫這個？

我已經試過on()方法

$(document).ready(function(){ 
    $('button').each(function() { 
     $(this).on('click', function() { 
        alert('Clicked.'); 
      // ...AJAX request... 
     }); 
    }); 
});

但它是一樣的。正常工作，不適用於加載AJAX的內容。

我卡住了，請幫助我。

P.S .:我使用的是最新版本的jQuery（v1.7.1）。

來源

2011-12-13 Simone

使用的liveQuery jQuery插件 –

@Shevelo - 這是有利於.live（）也不能者優先/ depricated超過depricated .delegate（）或.on（）或.bind（） –

你應該這樣做：

$(document).ready(function(){ 
     $('body').on('click','button', function() { 
        alert('Clicked.'); 
      // ...AJAX request... 
     }); 
});

這樣是body元素處理上<button>元素全部click事件和它的作品，即使他們是通過AJAX加入。

而不是使用<body>標籤，你可以使用一些包裝<button>的東西...在任何情況下閱讀jQuery文檔on()，這是非常簡單的。

P.S.在你想知道的情況下，live()的工作原理完全爲我所用on()，jQuery的只是攔截事件時，他們冒泡的DOM

來源

2011-12-13 14:16:50

它的工作！格拉齊尼古拉！ :) – Simone

你要設置的點擊處理程序後的按鈕已經在頁面上。如果你是在頁面加載時做的，那麼由ajax加載的按鈕還沒有接受處理程序分配。

來源

2011-12-13 14:17:22 Mike

如果您正確定位您的活動管理，則不完全正確。 –

嘗試on。

$(document).ready(function(){ 
     $('button').on('click', function() { 
        alert('Clicked.'); 
      // ...AJAX request... 
    }); 
});

，一個循環就足夠了，沒必要each循環，因爲on循環的自身檢測所有button元素和觸發的單擊事件。

來源

2011-12-13 14:19:39

事實，但在1.7之後，on（）是首選方法。在1.7之前，.live（）和.delegate（）是要走的路。 – Nix

謝謝哥們..更新了代碼.. –

可能最安全（也是最不容易出錯）的方法是在您將按鈕加載到AJAX之後綁定點擊事件。

來源

2011-12-13 14:26:35 pap

我喜歡這個實例的代表。

$(document).ready(function(){ 
    $('body').delegate('button','click',function(){ 
     alert('Clicked.'); 
    }); 
});

工作例如：http://jsfiddle.net/MarkSchultheiss/cKVGb/

上委託一些背景的討論，生活和綁定：http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

而且，最後的。on（）文檔，以便您也可以使用它： http://api.jquery.com/on/

所以你幾乎是正確的！第一個已經存在的按鈕：

$(document).ready(function(){ 
    $('button').on('click', function() { 
     alert('Clicked.'); 
        // ...AJAX request... 
    }); 
});

現在新的（老的）

$(document).ready(function(){ 
    $('body').on('click', 'button', function() { 
     alert('Clicked.'); 
        // ...AJAX request... 
    }); 
});

來源

2011-12-13 14:30:31

事實，但1.7之後，on（）是首選的方法。在1.7之前，.live（）和.delegate（）是要走的路。 – Nix

是的，但現在你應該使用on（）作爲委託（）在1.7中被棄用 –

.on（）和.delegate（）之間的主要重要區別實際上是實體的順序，並且.off ） - 請參閱.on（）文檔，瞭解從舊方法到.on（）的轉換註釋。 –

AJAX請求後刷新jQuery代碼

回答

相關問題