Question

这是脚本：

  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重新请求检索属于该类别的书籍，并且一旦成功，它将从servlet返回书籍重新加载该区域。这就是$（“＃browseBookArea”）。ajaxSuccess函数的作用。

现在我正在进行分页。本质上，分页与类别相同，除了这个时间类别已知（当前类别，我声明为全局变量），并且当用户按下时（如果按下类别按钮）从页面按钮检索页面，它被认为是第一页，并设置为1）。

问题是，它只在我按其中一个类别按钮或其中一个页面按钮时才有效。调用ajax success函数后，页面按钮将不再起作用。我在那里发出警报只是为了确保。它不会弹出任何东西。

所有“.pagination”按钮都在“#browseBookArea”div中。

Answer 1

您是否从DOM中删除元素？我认为，当你这样做时，事件处理程序也会被删除。

您可能希望改为使用delegate，因为与委托绑定的事件会持续存在于具有公共选择器的所有元素，无论它们何时被添加。

在后台，delegate基本上执行JavaScript“addEvent”，而click执行“onclick”事件。 onxxxx事件绑定到一个元素，而addEvent添加的事件绑定到一个选择器（class，id等）。我想这会解决你的问题。

注意：

你应该总是使用委托，以防万一这样的事情发生。

Answer 2

你的问题是：

$(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有一些注意事项，请查看文档以确保在使用之前它们不适用于您的具体案例。

如何从两个不同元素的两个事件刷新Jquery中的相同div？

2 个答案: