刷新的div無法訪問外部javascript文件

Question

我正在使用JavaScript / jQuery將頁面加載到div中。

我的問題是，然后我想要一些函數在這個加載的頁面中工作。 如果我將所需的函數與HTML一起添加到腳本標記中，那么它工作正常，但這看起來很混亂，我想知道是否還有其他任何方式可以通過附加的JavaScript文件工作？

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

我已經在我的標題中添加了一個腳本

<script src="custom.js" defer="defer"></script>

在這個腳本中我有一個功能：

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

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

    }
    );

});

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

Answer 1

我認為你需要在你的load回調中調用getScript jquery函數 ，希望能解決你的問題：

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

還有另一種使用jquery 延遲承諾的解決方案。

Answer 2

你能更具體一點（即：代碼樣本）。 你的意思是你加載的頁面內的腳本標簽不起作用，即：

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

或者，當您將新的html加載到div中時，您希望附加到Dom元素的事件不起作用？ 如果是這樣，你應該使用jQuery'on'方法作為你添加到頁面的元素將不會監聽你之前附加過處理程序的事件。 下面是在將元素附加到Dom時將處理程序附加到新元素所需的jQuery'on'方法的重載。

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

第二個參數將為當前匹配給定選擇器的元素以及將來與選擇器匹配的所有元素附加一個事件處理程序。

你好，我們又見面了，

defer屬性將延遲腳本的執行，直到初始頁面加載完畢，我不確定這是你所追求的行為。 然后它將在（'a＃view-users'）上設置一個事件處理程序，當單擊它時，它將允許（'view-users.php'）加載到（'#main-view'）中。 如果您的邏輯需要使用'view-users.php'生成的html，一旦加載，如果需要附加事件，則需要使用$ .on（），例如：

$(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中內聯編寫代碼。

嗨，

為了清楚起見，在初始頁面加載中是（'a＃view-users'）還是由ajax加載的'view_users.php'中的元素？

嗨，

我認為你自己和其他一些人提到的問題是，如果你的標題中有腳本與通過ajax加載到（'＃main-view'）的元素交互，即使你的原始代碼也是如此使用正確的Jquery選擇器，新加載的元素將不會被識別為相同的元素，這就是為什么您需要使用回調函數作為load方法的第二個參數或使用'on'方法。 'on'方法適用於標准的jQuery事件，包括'load'，即將元素加載到dom中。 例如

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

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

Answer 3

這里是一個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."); 
});