绑定点击事件 - 事件仅触发一次

Question

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

我有两个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;
   }

- Tac

Answer 1

使用live绑定click事件

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

- Naren Sisodiya

---

回复好快！没想到这样就可以了。应该自己想一下的。谢谢！！ - Tac

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));
});

- Mark Coleman

---

谢谢！学到了有关事件的新知识。 - Tac

Answer 3

你需要重新绑定点击事件到你用于重新填充页面的span元素上，或者你可以使用jQuery的delegate或live函数。目前的情况是你只绑定了现有的class为aPage的span元素的点击事件。而live或delegate会同时绑定现有和未来的元素：

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

- scrappedcola

Answer 4

好的，你的点击事件已经注册到类 .aPage 的元素上，而不是 #pag 元素。如果这个带有类 .aPage 的元素恰好在你的 #pag 元素内部（你没有指定，所以我只是猜测），当你替换页面的 HTML 时它会被销毁。为了解决这个问题，请将点击处理程序绑定到 #pag 上。

你也可以尝试以下方法：

更改

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

到

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

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

- ampersand

---

谢谢！还有，不需要将<i>event</i>作为参数。 - Tac

简短回答：如果您不使用event变量，则无需在函数定义中指定它。（它仍会传递给函数...您可以访问它，但这是另一篇文章的内容...） - ampersand

Answer 5

自 jQuery 1.7 以来，不再支持 live 方法，建议使用 delegate 方法代替。

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

- ray6080