如何使用Ajax和歷史記錄動態加載頁面？

Question

在使用Ajax和歷史記錄時，我對以下問題感到困惑：

規格：

• 我有一個頁面使用Ajax調用另一個頁面。
• 現在，已加載的頁面具有數據表，這些數據表又使用Ajax來獲取數據（截至目前有2個ajax調用）
• 我已經使用history.js進行頁面導航，它使用常見的ajax調用將內容加載到頁面div中

現在，我面臨以下問題：

• 對於第一個數據表頁面調用，我得到了一個ajaxcall。
• 令人驚訝的是，當我使用歷史記錄導航到另一個頁面並調用數據表頁面時，ajax調用現在會加倍。 它以線性方式進行。

這是我在使用ajax加載頁面時遇到的一個新問題，而該頁面反過來又包含Ajax調用。 造成此問題的主要原因是什么？ 另外，該問題的解決方案是什么？

我的通用代碼如下所示：

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

我的鏈接看起來像這樣：

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

我正在使用此通用代碼通過Ajax和歷史鏈接每個頁面

Answer 1

您是否正在為項目使用框架？ 在使用Yii框架之前，我已經注意到類似的行為。 我注意到的是，如果使用靜態ID創建對象，則會導致Ajax調用數量成倍增加。

嘗試為您的對象提供唯一的ID，以免事件被阻塞。

Answer 2

只是一個想法：加載Ajax的頁面是否有可能再次將點擊事件附加到“ link_click”鏈接上？