刷新的div无法访问外部javascript文件

Question

我正在使用JavaScript/jQuery将页面加载到div中。

我的问题是，我希望一些函数在这个加载的页面中工作。如果我将需要的函数与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文件中，该文件非常混乱。

Answer 1

我认为你需要调用getScriptjquery function在load回调类似的东西，希望能解决你的问题：

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

有另一种解决方案使用jquery deferred promise。

Answer 2

你可以更具体（即：代码示例）。你的意思是你加载的页面内部的脚本标记不工作，即：

<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" 
}) 

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."); 
});