通過AJAX加載頁面時jQuery無法正常工作

Question

我有一個已加載jQuery的索引頁以及一個滑塊插件的js文件。 然后，我使用on click事件使用.load加載外部頁面，如下所示：

//jQuery loaded from Google CDN here (in head)

jQuery( document ).ready(function() {
    jQuery( ".button" ).click(function() {
        var myUrl = "/url-to-page";
        jQuery( "#target-div" ).load(myUrl);
    });
});

這樣可以成功將外部頁面加載到＃target-div中，但是在索引頁面上加載的jQuery不會在從外部頁面加載的元素上觸發。 例如，我在外部頁面上有一些圖像（用於Slider插件），但是與直接將相同的圖像（在包裝div內）放置到索引頁面上一樣，Slider插件不會將它們變成幻燈片顯示。 。

外部頁面沒有任何html，head或body標簽-只是我要加載的內容包裝在某些div中。

有誰知道使jQuery在外部加載的頁面上工作的“技巧”？

Answer 1

問題是您的點擊事件已被綁定。 你會需要它們已經被加載后，結合自己的網頁上點擊事件到新創建的元素。 jQuery的load方法將一個函數作為第二個參數。 加載完成后便會觸發。

jQuery( document ).ready(function() {
    jQuery( ".button" ).click(function() {
        var myUrl = "/url-to-page";
        jQuery( "#target-div" ).load(myUrl, function () {
          // bind events here
        });
    });
});

編輯：使用事件委托

$(function () {    //shorthand for document ready
    $('#target-div').on('click', '.button', function () {
        $("#target-div").load("/url-to-page");
    });
});

#target-div每個.button都將綁定有click事件。 click事件還將綁定到添加到#target-div每個.button元素。 希望這會有所幫助。