绑定到单击事件 - 事件仅触发一次

Question

我正在使用 jquery 对 HTML 表进行分页。

我有 2 个 CSS 类，aPage 和 thePage， 一个创建分页字符串的 JavaScript 函数， 和 jquery 代码将每个“页面”绑定到 click 事件，以便在单击页面时计算分页字符串。

我的问题是点击事件只触发一次，尽管我希望它在每次单击页面时触发。

非常感谢任何帮助。 谢谢！！

我的 javascript/jquery 代码是：

var thisPage=1; npages=10;
 //initial pagination
  $("#pag").html(showPag(thisPage,npages));

 //  bind pagination string to click event
     $(".aPage").click(function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
 // function that returns pagination string
     function showPag(thisPage,npages) {
     p="";
     for(i=1;i<=10;i++){
     if(i==thisPage) {
     p+="<span class='thePage'>"+i+"</span>"
      }
     else {p+="<span class='aPage'>"+i+"</span>" }
     }
     return p;
   }

Answer 1

使用live绑定点击事件

 $(".aPage").live('click',function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });

Answer 2

由于每次调用 .html() 时都会破坏旧的 .aPage 链接，因此您需要使用 .live() 或 .delegate()

使用.live()

$(".aPage").live("click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});

使用.delegate()

$("#pag").delegate(".aPage", "click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});

Answer 3

您需要将单击事件重新绑定到重新填充页面的范围，或者您可以只使用 jQuery 的委托或实时函数。发生的情况是，您绑定单击事件的方式仅涵盖 aPage 类的现有范围。 Live 或 delegate 将绑定到现有和未来：

$(".aPage").live("click", function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });

Answer 4

那么您的点击事件已注册到 .aPage 类的元素而不是 #pag 元素。如果这个带有 .aPage 类的元素恰好位于您的 #pag 元素内（您没有指定，所以我只是在这里猜测），那么当您替换页面的 html 时，它就会被销毁。要解决此问题，请将单击处理程序绑定到#pag。

您还可以尝试以下操作：

将

$(".aPage").click(function(){...})

更改为

$(".aPage").live('click ',function(){...})

这将绑定到具有该 className 的所有当前和未来元素。

Answer 5

从 jQuery 1.7 开始，不再支持 live，推荐使用 delegate。

$("#pag").delegate(".aPage", "click", function(event){
    var thisPage=$(this).text()
    $("#pag").html(showPag(thisPage,npages));  
});