Question

我真的希望有人可以帮助解决这个问题。我有一个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>

这应该弹出一个包含来自另一个页面的内容的div。

现在我的链接： <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

这在初始页面上效果很好但现在问题是当我点击访问具有完全相同链接的第2页时，该链接不再起作用。

作为一个注释，我的页面应该加载一个id =“paging”的div。 ajax分页本身很有效，只是结果页面上的任何jquery click事件都不起作用。我认为问题可能是我需要重新绑定脚本但我不知道如何实现它。

感谢您提供任何帮助。

Answer 1

我猜你会用分页覆盖链接，因此click事件不再受限制。如果您使用的是jquery 1.3，则可以使用live events来解决此问题。

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

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

Answer 2

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

如果您使用的是jQuery 1.3或更高版本，您可以使用这样的实时事件（点击）：

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

请注意，直播活动不适用于以下事件：更改，模糊，焦点，鼠标中心，鼠标提交和提交。

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

Answer 3

根据您的描述，听起来您正在生成一个带有.wsbutton_pop的新页面。如果是这种情况，您需要将onclick功能附加到它上面。您的初始脚本仅在首次加载时运行，因此注册仅适用于当时存在的.wsbutton_pop。

Answer 4

您只绑定了最初的.wsbutton_pop元素。如果这些被删除，并且添加了类.wsbutton_pop的新元素，它们将不会自动接收您一次连接的单击事件处理程序。

您正在寻找的是

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

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

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

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

ajax分页后，Click事件不起作用

4 个答案: