如何使用Ajax和历史记录动态加载页面？

Question

I am confused with the following problems in using Ajax and History:

Specifications:

• I have a page that calls another page using Ajax.
• Now the loaded page has datatables which inturn uses Ajax to get data(As of now 2 ajax calls)
• I have used history.js for page navigation, which uses common ajax call for loading the content in page div

Now, I face with the following problem:

• For first datatable page call, I get one ajaxcall.
• Surprisingly, when I navigate to another page using history and call the datatable page, the ajax call now doubles. It goes on in a linear manner.

This is a new problem I have been facing while loading a page using ajax which inturns contain Ajax call. What can be the major cause of this problem? Also, what is the solution of this problem?

My common code looks like this:

<script>
var index=function(url,update_id,state){
        $.ajax({
          url: url,
        }).done(function(data) {
            $("#"+update_id).html('');
            $("#"+update_id).html(data);
            if(state == 1){
                history.pushState({url: url,id:update_id},"name",url);
            }
        });
    }
jQuery(document).ready(function($) {
    $(document.body).on('click','.link_click',function(){
        var url = $(this).attr('href');
        var update_id = $(this).attr('update_id');
        index(url,update_id,1);
    })
});

window.addEventListener('popstate', function(event) {
    if(event.state.url != null){
        index(event.state.url,event.state.id);
    }
});
</script>

My link looks like this:

<a href="/page1/index" onclick = "return false;" update_id="new" class="link_click">My Contact</a>

I am using this common code for linking every page using Ajax and history

Answer 1

Are you using a framework for your project? I've noticed similar behaviour before using the Yii Framework. What I noticed is that if you create your objects with a static Id, it will cause a multiplication in the number of ajax calls.

Try giving your objects unique ids so that the events don't get clogged.

Answer 2

只是一个想法：加载Ajax的页面是否有可能再次将点击事件附加到“ link_click”链接上？