jquery功能無法正常工作後.html重新加載

我有一個頁面，其中包含最初從include_once('show_calendarV2.php');行加載的項目列表。jquery功能無法正常工作後.html重新加載

在每個項目旁邊都有一個刪除圖標，它會觸發以下jquery從db中刪除項目，然後更新頁面。

$('.delete_schedule_item').click(function() { 
    var id = $(this).next('input[type=hidden]').attr('value'); 
    alert (id); 

    $.ajax({ 
      url: 'ajax/delete_schedule_item.php', 
      type: 'post', 
      data: { id: id }, 
      dataType: 'json', // get back status of request in JSON 
      success: function(data) 
      { 
       //alert('item deleted'); 
      } 
     //   if (data.status) { 
     //   alert('success'); 
     //   } 
     //   else { 
     //    alert('error'); 
     //   }, 
     //... other parameters/callbacks ... 
     }); 

    $.get('show_calendarV2.php', {},  
     function(data) 
     { 
     //load the calendar data 
     $("#calendar").html(data); 

     }); 
    });

一切工作正常，第一次刪除一個項目。該項目被刪除。加載新頁面。

但是在頁面加載刪除按鈕後？ jquery調用？不再起作用。

相同的頁面用於創建初始顯示以及刷新的頁面，所以我不確定代碼失敗的原因。

想法？

來源

2009-09-10 ian

嘗試改變

$('.delete_schedule_item').click(function() {

到

$('.delete_schedule_item').live("click", function() {

如果加載了一堆新的HTML的，你跑前並不適用於它了該功能。而且，由於您是通過Ajax加載的，因此一旦完成加載，該函數就不會再次執行。

jQuery中live()和die()函數的優點在於它們處理這種情況。無論何時載入與選擇器相匹配的新內容，新元素都會自動更新。

來源

2009-09-10 18:50:43 womp

Wooo。這是什麼.live和爲什麼.click只能工作一次？ – ian 2009-09-10 18:54:21

這是它的文檔。它解釋得很好。 http://docs.jquery.com/Events/live。從本質上講，它使用事件委託來處理單擊事件的祖先元素，並查看它發生的位置，以及它是否發生在與您的選擇器相匹配的東西上，那麼它就是事情。 – womp 2009-09-10 18:58:57

好吧，不像普通的javascript，每次點擊時都會發生...因爲這個jquery和onready（）函數內部只會發生一次，除非我使用live（）函數。 – ian 2009-09-10 19:01:15

使用事件代表團：

$('.delete_schedule_item').live("click", function() {...

使用live會自動事件處理程序重新安裝到新注入的元素事件代表團。當你用ajax替換你的網頁中的新內容時，任何綁定到'old'元素的事件處理程序都不會自動重新連接到新注入的元素，除非你使用事件委託（或重新附加事件處理程序在你的ajax方法的回調中）。

要使用live進行事件委託，您需要使用jQuery 1.3或更高版本。

來源

2009-09-10 18:51:14 karim79

它不再工作的原因是事件處理程序被添加到DOM元素本身。當您通過AJAX加載新的HTML時，附有事件處理程序的舊元素將被刪除，並且不包含處理程序的新元素將替換它們的位置。有兩種可能的解決方案：首先，您可以將處理程序重新應用到新加載的HTML。只需重新運行在已加載的HTML上設置事件處理程序的代碼即可。另一個選項，你可以在這種情況下使用，因爲click事件是由live處理的，使用live事件處理程序作爲@womp和@ karim79的建議。

請注意，活動處理程序有一些限制 - 它們不適用於所有類型的事件（點擊作品），並且它們無法與傳播一起正常工作（即停止傳播不起作用）。有關更多信息，請參閱live的jQuery文檔。

來源

2009-09-10 18:59:15 tvanfosson

所以當我打電話時， $（document）.ready（function（）事件處理程序附加到DOM對象上，但是當我刪除該HTML並通過我的ajax調用替換掉那些鏈接時，這些鏈接被銷燬了 – ian 2009-09-10 19:08:43

是的，處理程序使用DOM元素和在刪除它們時會被刪除。 – tvanfosson 2009-09-10 19:35:42

jquery功能無法正常工作後.html重新加載

回答

相關問題