Question

我有一个左侧导航的页面，它有两个链接和一个主div。每当用户单击左侧导航中的链接时，主div就会使用服务器中的内容进行更新。我使用pjax。

当用户最初访问此页面时，主div有一个标识为somelink的链接，当用户单击超链接时，该链接会显示一个警告框。这是通过以下代码完成的：

   $(document).ready(function() { 
    .....
    $('#somelink').click(function (event){
       alert("here");
    });
     ....
   });

单击导航栏上的第二个链接时，我从服务器加载内容并更新主div。当用户单击第一个链接时，我再次从服务器加载内容并更新主div。但是，这次当我点击somelink时没有任何反应。就好像jQuery无法检测到存在id为somelink的链接，因为它是通过ajax加载的。

有没有办法克服这个问题？

Answer 1

您需要使用.on并将点击处理程序委托给未被替换的更高级别元素，因为它已加载了AJAX。

$(main).on('click', '#somelink', function() {
    alert("here");
});

原因在于，当你执行$('#somelink')时，它会遍历DOM并找到每个原样。因此，当您通过替换删除它时，您需要再次添加或使用.on

Answer 2

您已经替换了元素，因此附加了事件。您需要以不同方式添加它们，以便在dom更新后自动使用它们。

尝试on功能：

$('#somelink').on('click', function() {});

较旧的jQuery版本使用“实时”功能执行，使用更旧的版本，您必须在每次dom更新后再次绑定事件。