javascript - 绑定到点击事件 - 事件只触发一次

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

.aPage由于您每次打电话时都会破坏旧链接，因此您.html()需要使用.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

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

您还可以尝试以下方法：

改变

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

至

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

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

Answer 4

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

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

Answer 5

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

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