javascript - 成功调用 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 绑定(bind):

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

所以您将事件绑定(bind)到静态元素 "#pagination" 但通过指定 selector 过滤 "ul a" 中的事件:

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

即使元素发生变化，这也允许事件触发，因为事件绑定(bind)到不会改变的东西，即 “#pagination”。

引用 frans 的评论/很好的解释为什么会发生这种情况:

When you remove elements in the DOM all events bound to them will be destroyed. Even if you replace them with the exact same element again in the exact same location in the DOM.