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

Question

I have this HTML code

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

and I am able to replace the code above anytime an ajax call is successful as shown in the snippet below

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

But the problem I am facing is that, before the ajax call, when I click on the links in the HTML code, I get what is expected. But after making the ajax call, the links redirect me to another page instead of staying on the page and displaying the alert.

kindly help me solve this problem.

Answer 1

You need to change your on binding:

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

So you bind the event to the static element "#pagination" but filter for events in "ul a" by specifying a selector :

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.

This allows the event to fire even though the elements change, because the event is bound to something that doesn't change, ie "#pagination" .

To quote frans comment/good explanation of why this is happening:

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.