2013-04-09 101 views
0

我正在使用JavaScript/jQuery將頁面加載到div中。刷新的div無法訪問外部javascript文件

我的問題是,我希望一些函數在這個加載的頁面中工作。如果我將需要的函數與HTML一起添加到腳本標記中,那麼它可以正常工作,但這看起來很亂,我想知道是否有其他方法可以從附加的JavaScript文件中工作?

編輯:我會更好地解釋我的意思。

我已經在我的頭連接的腳本,像這樣

<script src="custom.js" defer="defer"></script> 
這個腳本中

我有一個函數:現在內加載view_users股利(#主視圖)

$(document).ready(function() { 
$('a#view-users').click(function() { 

    $('#main-view').load('view_users.php'); 

    } 
    ); 

}); 

。 PHP。在view_users.php我需要執行ajax搜索,所以我在我的custom.js文件中添加了另一個函數。問題是#main-view div中的任何內容都不能使用我的custom.js文件中的內容。我想知道我是否可以解決這個問題,同時仍然在頭文件中添加腳本,而不是將其添加到我的view_users.php文件中,該文件非常混亂。

+2

請更清楚地說明你的問題。 – 2013-04-09 09:44:31

+0

你只是將新的HTML內容加載到一個div中,或者你是否正在討論將整個新頁面加載到iframe中? – 23tux 2013-04-09 09:44:54

+0

對不起,我會嘗試解釋得更清楚。我在頭文件中加入了一個腳本,如,當我點擊一個鏈接時,它會將一個外部php文件加載到div中。之後,該div中沒有​​任何內容可以使用附加的腳本 – Neil 2013-04-09 10:19:19

回答

2

我認爲你需要調用getScriptjquery functionload回調類似的東西,希望能解決你的問題:

$('#result').load('ajax/test.html', function() { 
     $.getScript("ajax/test.js"); 
}); 

有另一種解決方案使用jquery deferred promise

+0

謝謝我做到了這一點,它的工作很棒! – Neil 2013-04-09 10:40:46

+0

@ user1680768不用客氣 – 2013-04-09 11:00:08

0

你可以更具體(即:代碼示例)。你的意思是你加載的頁面內部的腳本標記不工作,即:

<script type="text/javascript" src="jscript"></script> 

,或者你想附加到DOM元素的事件,當您加載新的HTML到DIV不工作?如果是這樣的話,您應該使用jQuery的'on'方法,因爲您要添加到頁面的元素不會監聽您之前附加處理程序所處理的事件。下面是jQuery'on'方法的重載,當你將它們附加到Dom時,將處理程序附加到新元素上。

$('#myDiv').on('click', '#loadedPageElement', function(e) { 
    alert('clicked'); 
    e.preventDefault(); 
}); 

第二個參數將附加的事件處理程序既在本,並且還用於在未來選擇匹配的所有元素的給定的選擇匹配元素。

嗨再次,

defer屬性會直到初始頁面加載延遲腳本的執行,我不知道這是你以後的行爲。然後,它會在('a#view-users')上設置一個事件處理程序,當它被點擊時它將允許('view-users.php')加載到('#main-view')中。如果您有需要與一旦加載,您將需要使用$。對()的「視圖users.php」生成的HTML工作邏輯,如果一個事件的安裝是需要如:

$(document).ready(function() { 
$('a#view-users').click(function() { 

    $('#main-view').load('view_users.php'); 

}); 

$('#main-view').on('click', '#loadedPageElement', function(e) { 
    alert('clicked'); 
    e.preventDefault(); 
}); 

}); 

or if you just want some code to run then a callback function is sufficient: 

$(document).ready(function() { 
    $('a#view-users').click(function() { 

     $('#main-view').load('view_users.php',function(){ 

      alert('code running after load of "view_users.php"') 

     }); 

    }); 

});

既不應該要求你有代碼寫在你的內嵌加載的PHP。

您好,

只是爲了清楚起見,是(「一個#視圖用戶」)在初始頁面加載或在「view_users.php」由AJAX加載的元件?

嗨,

我想通過自己的暗示和其他一些人是你所遇到的問題,如果你有你的頭腳本與被加載到('#主視圖元素交互'),即使您的原始代碼使用正確的Jquery選擇器,新加載的元素也不會被識別爲相同的元素,這就是爲什麼您需要使用回調函數作爲加載方法的第二個參數或使用'on'方法。 'on'方法與標準的jQuery事件一起工作,包括'load',即將一個元素加載到dom中。例如

$("#containerElement").on('load','#newlyLoadedElement',function(e){ 

     //Do some stuff when the element'#newlyLoadedElement' is inserted 
     // into "#containerElement" 
}) 
+0

如果有幫助,我編輯了我的原始問題 – Neil 2013-04-09 10:36:18

0

這裏有一個的jsfiddle http://jsfiddle.net/9MfMS/2/如果你的正在試圖做的是從另一個頁面加載HTML和附加事件處理程序的給它。

//the html that is loaded 
<div id="#clickMe">Click Me</div> 

//attach event handler to it 
$(document).on('click','#clickMe',function(){ 
    alert("Function invoked on html from different page."); 
});