Question

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

我的问题是我想要一些功能在这个加载的页面中工作。如果我将所需的函数与HTML一起添加到脚本标记中，那么它工作正常但这看起来很混乱，我想知道是否还有其他方法可以使用附加的JavaScript文件来处理它？</ p>

编辑：我会更好地解释我的意思。

我在我的标题中添加了一个脚本，如此

<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

我认为您需要在getScript回调中致电load jquery function，以解决您的问题：

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

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

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

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

3 个答案: