如何解決Ajax調用後的JavaScript？

所以我的網頁結構被分成三個文件。我有一個3個div的index.html文件;我的導航欄，內容框和頁腳。然後，我有另外兩個.html文件，其中有不同的內容，我想點擊鏈接時加載。如何解決Ajax調用後的JavaScript？

我的JavaScript看起來像這樣：

$(".content").load("home.html"); 

$(".parents-link").click(function() { 
    $(".content").load("parents.html"); 
}); 

$(".home-link").click(function() { 
    $(".content").load("home.html"); 
});

所有文件都用一些javascript，當我第一次打開index.html一切工作完全正常，但一旦我開始點擊鏈接的JavaScript已經不火在內容分區。我在index.html中的導航欄使用JavaScript，無論如何仍然工作。

此外，我所有的自定義js都在一個.js文件中，用於所有三個.html文件。我也在使用一些插件。

我該如何解決這個問題？

來源

2015-09-07 melmar12

*「但是，一旦我開始點擊鏈接的JavaScript不會再開火」*哪些鏈接？哪些JavaScript？你發佈了什麼？ –

鏈接我在我的導航中添加了新的html，點擊 – melmar12

我想你有一個新的元素附加到DOM但沒有附加事件的問題。你應該嘗試在父容器上使用事件委託，並在其上綁定'click'事件。 –

您正在加載點擊動態內容。 .click()僅適用於當前DOM中的元素，而不適用於將來的元素。您必須使用$(staticElement).on('click', 'dynamicElementSelector')爲：

$(document).on('click', ".parents-link", function() { 
    $(".content").load("parents.html"); 
});

我建議使用動態結構：

<a href="parents.html" class="loading-link"></a> 

$(document).on('click', '.loading-link', function (event) { 
    event.preventDefault(); // Prevent browser from following link. 
    $.load($(this).attr('href')); 
});

只會有一個函數，該函數必須加載某些內容的所有鏈接。

來源

2015-09-07 05:49:42 Justinas

讓我們試試這個：

$('html').on('click', '.parents-link', function() { 
    $('.content').load('parents.html'); 
}); 

$('html').on('click', '.home-link', function() { 
    $('.content').load('home.html'); 
});

正如我在我的第一個評論說，我們需要將事件綁定到上家長和利用event propagation。

來源

2015-09-07 05:51:19

當我將其直接放在我的頁面上時，這並不起作用，但我正在嘗試閱讀此內容，因爲我仍然不理解此概念 – melmar12

如何解決Ajax調用後的JavaScript？

回答

相關問題