如何刷新來自兩個不同元素的兩個事件在Jquery中的同一個div？

下面是腳本：如何刷新來自兩個不同元素的兩個事件在Jquery中的同一個div？

var currentCat = "all"; 
    $(document).ready(function(){ 
    $(".categoryItem").click(function(event){ 
     $("#browseBookArea").fadeToggle(100); 
     currentCat = $(this).attr("id"); 
     $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:1});        });  
    $("#browseBookArea").ajaxSuccess(function(){        
     $(this).show(300); 
     $(this).load("Components/browseBookArea.jsp"); 
    }); 

    $(".pagination").click(function(event){ 
     $("#browseBookArea").fadeToggle(100); 
     var page = $(this).attr("id"); 
     alert(currentCat); 
     $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page}); 
     }); 
});

我在做一個網上書店。「browseBookArea」是書籍在瀏覽器上顯示的div。類「.categoryItem」是類別按鈕。每當按下一個類別按鈕時，屬於該類別的書籍將通過GET rerquest進行檢索，一旦成功，它將使用從servlet返回的書籍重新加載該區域。這就是$（「＃browseBookArea」）.ajaxSuccess函數的作用。

現在我正在做分頁。本質上，分頁與分類相同，除了這個時間類別已經是已知的（當前類別，我聲明爲全局變量），並且當用戶按下時從頁面按鈕中檢索頁面（如果按下分類按鈕，它被認爲是第一頁，並被設置爲1）。

問題是，它只在我按下其中一個類別按鈕或其中一個頁面按鈕時才起作用。在調用ajax成功函數後，頁面按鈕將不再起作用。我在那裏提醒，以確保。它不會彈出任何東西。

所有「.pagination」按鈕位於「#browseBookArea」div內。

來源

2011-04-17 Amumu

您的問題是這樣的：

$(this).load("Components/browseBookArea.jsp");

取代的#browseBookArea的內容，從而就失去了自己的按鍵綁定。您可以使用回調load點擊處理程序綁定到新的按鈕，也可以使用live的按鈕：

$(".pagination").live('click', function(event){ 
    $("#browseBookArea").fadeToggle(100); 
    var page = $(this).attr("id"); 
    alert(currentCat); 
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page}); 
});

或delegate的按鈕：

$('#browseBookArea').delegate('.pagination', 'click', function(event) { 
    $("#browseBookArea").fadeToggle(100); 
    var page = $(this).attr("id"); 
    alert(currentCat); 
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page}); 
});

有一些注意事項有delegate和live，請仔細閱讀文檔以確保它們在您使用它們之前不適用於您的特定情況。

來源

2011-04-17 07:34:09

但它仍然沒有完全解決我的問題。 api文檔中的示例，「點擊我」不像我的那樣刷新。儘管如此，我還是根據您提供的信息設法提出了另一種解決方案。我不知道在再次加載html頁面時，它會將我的事件處理程序移除到該元素。我的解決方案是，每次頁面重新加載時，我都會在重新加載的html頁面（我的browseBookArea.jsp）中放入相同的腳本，因此它會再次重新附加處理程序。 – Amumu 2011-04-17 08:02:00

您是否從DOM中刪除元素？我認爲當你這樣做時，你的事件處理程序也會被移除。

您可能會想用delegate代替，因爲與代理綁定的事件對於具有公共選擇器的所有元素都會持續存在，而不管它們何時添加。

在後臺，代理基本上做了一個JavaScript「addEvent」，而點擊做了一個「onclick」事件。 onxxxx事件綁定到一個元素，而添加了addEvent的事件綁定到一個選擇器（class，id等）。我認爲這會解決你的問題。

注：

你應該總是使用委託，以防萬一發生此類事情。

來源

2011-04-17 07:29:39 tjameson

如何刷新來自兩個不同元素的兩個事件在Jquery中的同一個div？

回答

相關問題