Javascript 单击事件在ajax分页后不起作用

我真的希望有人能帮助解决这个问题。我有一个ajax分页脚本，它在第一个页面上非常有效，但是单击事件在分页的任何其他页面上都不起作用

我是这样设置的：

jQuery脚本

<script type="text/javascript">
// prepare when the DOM is ready 
$().ready(function() {
//popup div
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box

      var height = $('#popuup_div').height();
      var width = $('#popuup_div').width();
      //calculating offset for displaying popup message
      leftVal=e.pageX-(width/2)+"px";
      topVal=e.pageY-(height/2)+"px";
      //show the popup message and hide with fading effect
      $('#popuup_div').css({left:leftVal,top:topVal}).show();
      $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>");

       $.ajax({ 
          type: "get", 
          url: $(this).attr("href"), 
          success: function(r){ 
           $('#popuup_div').html("")   
           $('#popuup_div').prepend(r);
             }
     });

  });

//close div on mouse click

$(".popup_msg").click(function(e){ 
      $('#popuup_div').fadeOut();
  }); 

}); 
</script>

//当DOM准备就绪时进行准备
$（）.ready（函数（））{
//弹出div
$（“.wsbutton_pop”）。单击（函数（e）{
//获取消息框的高度和宽度
变量高度=$（'popuup_div'）。高度（）；
变量宽度=$（'popuup_div'）.width（）；
//计算显示弹出消息的偏移量
leftVal=e.pageX-（宽度/2）+“px”；
topVal=e.pageY-（高度/2）+“px”；
//显示弹出消息并以淡入淡出效果隐藏
$（'popuup_div'）.css（{left:leftVal，top:topVal}）.show（）；
$（'popuup_div'）.html（“”）；
$.ajax（{
键入：“获取”，
url:$（this.attr（“href”），
成功：函数（r）{
$（'popuup_div'）.html（“”）
$（'popuup_div'）。前置词（r）；
}
});
});
//鼠标单击关闭div
$（“.popup_msg”）。单击（函数（e）{
$（'popuup_div'）.fadeOut（）；
}); 
}); 

这将弹出一个包含另一页内容的div

现在我的链接：

这在最初的页面上非常有效，但现在的问题是当我点击访问第2页时，它有完全相同的链接，链接不再有效

需要注意的是，我的页面应该加载到一个id=“paging”的div中。ajax页面本身工作得很好，只是结果页面上的任何jquery单击事件都不起作用。我想问题可能是我需要重新绑定脚本，但我不知道如何完成

---

感谢您在这方面的帮助。

根据您的描述，听起来您正在生成一个带有.wsbutton\u弹出窗口的新页面。如果是这种情况，则需要将onclick函数附加到它。您的初始脚本仅在第一次加载时运行，因此注册仅针对当时存在的.wsbutton_pop。

我猜您正在使用分页覆盖链接，因此单击事件不再绑定。如果您使用的是jQuery1.3，那么可以使用来解决这个问题

$(".wsbutton_pop").live("click", function(e) { ...

---

或者，如果您使用的是早期版本的jQuery，则可以在返回新页面数据时重新附加事件处理程序。

重新绑定脚本是正确的。原因是页面上的元素在ajax回发过程中被重新创建

如果您使用的是jQuery 1.3或更高版本，则可以使用如下实时事件（用于单击）：

$(".wsbutton_pop").live("click", function(e){ 
    ...
});

请注意，实时事件不适用于以下事件：更改、模糊、聚焦、mouseenter、mouseleave和submit

如果您没有使用jQuery 1.3，或者需要使用上述事件之一，则应遵循以下文章中的建议以避免内存泄漏：

---

您仅绑定初始的.wsbutton\u pop元素。 如果删除了这些元素，并且添加了class.wsbutton\u pop的新元素，它们将不会自动接收到您连接的click事件处理程序

你要找的是

$(".wsbutton_pop").live("click", function(e) {...});

这将应用于当前页面上的所有.wsbutton_pop实例以及创建的任何实例

-=-=-=-=-=-=-=-=-=-

在我写这篇文章时，其他答案也出现了。我想说，如果我们把Brian Fisher的文章和Jimmie R.Houts的文章混搭在一起，我们会得到最好的答案，并且可能提到只有DOM中当前的元素在使用$（..）时才会收到事件处理程序。单击（…）