javascript - 即使使用 ajax 加载页面也会丢失点击

Question

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

当用户最初来到这个页面时，主 div 有一个带有 id 的链接，somelink当用户单击超链接时会显示一个警告框。这是通过以下代码完成的：

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

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

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

score 4 · Accepted Answer

您需要使用.on单击处理程序并将其委托给更高级别的元素，该元素不会被替换，因为它是用 AJAX 加载的。

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

原因是当你这样做时$('#somelink')，它会通过 DOM 并按原样找到每一个。因此，当您通过替换删除它时，您需要再次添加或使用.on

score 0 · Accepted Answer

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

试试on功能：

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

旧的 jQuery 版本使用“live”功能，更旧的版本你必须在每次 dom 更新后再次绑定你的事件。

2 回答 2