2013-02-26 57 views
0

我使用​​將相同的頁面動態加載到div中。將每個頁面的div加載到主頁面上的兩個窗格中。有用。我想要做的是讓JavaScript在子頁面中包含的鏈接上工作。這些子頁面上只有一個列表。使用jQuery .load()加載的頁面不響應其他JavaScript

鏈接必須是相對於根,但以相同方式鏈接JS文件不起作用。無論我說的.js文件位於何處,什麼都不會發生。只是最初的.load()函數。

有沒有東西我添加到代碼,或找到它在哪裏尋找.js文件?

這是​​

$(document).ready(function() { 
    //#left and #right are divs loading content from .content/.description 
    $('#left').load('demos/websites.html .content'); 
    $('#right').load('demos/websites.html .description'); 
    $('nav#subnav li a').click(function() { 
     var page = $(this).attr('href'); 
     $('#left').load(page + ' .content'); 
     $('#right').load(page + ' .description'); 
     return false; 
    }); 
}); 

回答

3

你最好用事件代理功能。由於​​調用是異步的,因此它們在沒有收到響應時立即返回,並且.click()綁定僅在執行時考慮DOM中存在的元素。

$(document).on('click', 'nav#subnav li a', function() { 
    ... 
}); 

在jQuery 1.7,.on()是這樣做的推薦方式。

1

看起來像一個計時問題。使用load的回調函數來註冊點擊事件。

$('#left').load('demos/websites.html .content',function() { 
     console.log('Left pane loaded'); 
    }); 
-1

以下是亞歷山大推薦的完整代碼。

$(document).ready(function() { 
    //#left and #right are divs loading content from .content/.description 
    $('#left').load('demos/websites.html .content'); 
    $('#right').load('demos/websites.html .description'); 

    $(document).on('click', 'nav#subnav li a', function() { 
    var page = $(this).attr('href'); 

    $('#left').load(page+' .content'); 
    $('#right').load(page+' .description'); 
    return false; 

    }); 
}); 

但確保您使用的是jquery 1.7或更高版本。

您的代碼無法正常工作的原因 - 當您將點擊處理程序綁定到鏈接的語句時,可能不會在DOM本身加載鏈接。

+0

如果你認爲我的問題可能會更好理解提供完整的代碼你可以讓我知道,我很樂意詳細說明我自己的答案:) – Alexander 2013-02-26 12:38:26

+0

:)是的,我可以。感謝您指出。 – Ankit 2013-02-26 12:45:35

0

當您使用的.load函數帶有後綴選擇器表達式時,您嘗試加載的頁面中包含的.js文件不會被執行,就好像它們根本沒有被包含。

,那麼你有2種選擇:

  1. 使用.load沒有後綴選擇表達功能
  2. 或包含在郵件頁面的.js文件,然後加載這樣

    內容後,再執行所需要的功能

    $('#left')。load('demos/websites.html .content',function(){ //在這裏執行你的js函數 });

從jQuery的網站:

腳本執行

致電時.load()使用URL不具有後綴選擇器表達式,該內容被傳遞到.HTML()被移除腳本之前。這會在腳本塊被丟棄之前執行。如果。調用load()時會在URL中附加一個選擇器表達式,但是,在更新DOM之前,腳本會被剝離,因此不會執行。這兩種情況的例子如下:

在這裏,作爲文檔一部分加載到#a中的任何JavaScript都將成功執行。

1. $('#a').load('article.html'); 

但是,在以下情況下,在文檔中的腳本塊被加載到#b的被剝離出來,不執行:

1. $('#b').load('article.html #target'); 
相關問題