成功阻止ajax调用后无法阻止链接重定向

Question

我有这个HTML代码

<div class="pull-right" id="pagination">
    <ul class="pagination">
        <li><a href="/filter/sector/c2VjXzE?page=1">1</a></li>
        <li><a href="/filter/sector/c2VjXzE?page=2">2</a></li>
        <li><a href="/filter/sector/c2VjXzE?page=3">3</a></li>
        <li><a href="/filter/sector/c2VjXzE?page=4">4</a></li>
    </ul>
</div>

而且我可以在每次ajax调用成功时替换上面的代码，如下面的代码段所示

 $("#pagination").find("ul a").on('click', function(e) { alert('Link has been clicked'); e.preventDefault(); }); function update() { $.ajax({ dataType: 'json', url: url, data: { page: page_to_visit } }).done(function(json) { var totalPage = json.total; var pagination_links = '<ul class="pagination">'; var i = 1; while (i <= totalPage) { pagination_links = pagination_links + '<li><a href="' + url + '?page=' + i + '">' + i + '</a></li>'; i++; } pagination_links = pagination_links + '</ul>'; $("#pagination").html(pagination_links); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pull-right" id="pagination"> <ul class="pagination"> <li><a href="/filter/sector/c2VjXzE?page=1">1</a></li> <li><a href="/filter/sector/c2VjXzE?page=2">2</a></li> <li><a href="/filter/sector/c2VjXzE?page=3">3</a></li> <li><a href="/filter/sector/c2VjXzE?page=4">4</a></li> </ul> </div> 

但是我面临的问题是，在ajax调用之前，当我单击HTML代码中的链接时，我得到了预期的结果。 但是在进行ajax调用后，这些链接会将我重定向到另一页面，而不是停留在该页面上并显示警报。

请帮助我解决这个问题。

Answer 1

你需要改变你on绑定：

$("#pagination").on('click','ul a',function(e) {
 ....
});

因此，您将事件绑定到静态元素"#pagination"但通过指定选择器来过滤"ul a"的事件：

一个选择器字符串，用于过滤触发事件的所选元素的后代。 如果选择器为null或省略，则事件在到达所选元素时始终被触发。

即使元素发生更改，这也可以触发事件，因为事件绑定到了不变的东西，即"#pagination" 。

引用frans评论/很好地解释为什么会这样：

当您删除DOM中的元素时，绑定到它们的所有事件都将被销毁。 即使您在DOM中完全相同的位置再次将它们替换为完全相同的元素。