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调用成功的任何时候替换上面的代码，如下面的代码段所示

＆＃13;

$("#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);
  });
}

＆＃13;

<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>

＆＃13;

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

请帮助我解决这个问题。

Answer 1

您需要更改on绑定：

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

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

用于过滤所选元素后代的选择器字符串触发事件。如果选择器为null或省略，则为事件当它到达所选元素时总是被触发。

这允许事件即使元素发生变化也会触发，因为事件被绑定到不会改变的事物，即"#pagination"。

引用frans评论/ 为什么的好解释：

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

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

1 个答案: