包含jQuery插件html的jQuery load()问题

Question

仅供参考，以下是我的代码：

index.html

<script type="text/javascript" src="js/script.js"></script>

script.js

$(document).ready(function() {
    $('#buttonEphone').click(function() {
        $('#apDiv2').load("ePhone.html, #content");
    });
});

"ePhone.html“包含一些灯箱效果。(使用下面的代码)

ePhone.html

<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>

Litebox插件还需要在ePhone.html的BODY标记中添加onload="initLightbox()"。

通过上面的代码，我可以将ePhone.html的内容(#content div)加载到我的index.html的<div>(apDiv2)中。但是，灯箱效果不再起作用。我还尝试加载整个html，而不仅仅是#content：

$('#apDiv2').load('ePhone.html');

但它仍然不起作用。

Answer 1

由于.load()是.bind('load', handler)的快捷方式，并且通过.bind()将现有功能与加载到DOM中的新元素一起使用时存在问题，因此请尝试使用.live('load', handler)来完成任务。

.live()提供了与.bind()相同的功能，但增加了一个好处，即加载的数据中的任何元素都将受到当前使用的任何脚本的影响。

编辑

从上面关于使用<body onload="">属性的评论中，您可能应该知道这一点：

.ready()方法通常与属性不兼容。如果必须使用load，请不要使用.ready()或使用jQuery的.load()方法将load事件处理程序附加到窗口或更具体的项，如图像。

编辑2个

试试这个：

$('#apDiv2').live('load', 'ePhone.html, #content', function(){
    //Add extra stuff here if you need to
});

Answer 2

在浏览器中，Javascript在发生特定事件时执行。在页面加载时、页面加载后或任何定义的事件..所以..

但是，当您尝试在某些DIV中通过ajax加载HTML时，如果HTML包含一些JS，则浏览器将不会执行该JS，因为该JS没有在浏览器的DOM中注册。

因此，您可以做的是，在ePhone.html中只保留HTML，并从该页面中移出所有JS脚本，并将该JS保留在index.html上。并使用live()绑定您在ePhone.html中注册的任何事件。

这将使它工作。

谢谢!

侯赛因

Answer 3

在jquery.load函数完成后，您可以使用getScript函数动态加载脚本。试试这个：

$(document).ready(function() {
 $('#buttonEphone').click(function() {
  $('#apDiv2').load("ePhone.html, #content", function(){

   // load complete
   // now dynamically load the script

    $.getScript('js/prototype.lite.js', function() {
     $.getScript('js/moo.fx.js', function() {
      $.getScript('js/litebox-1.0.js', function() {
         // init lightbox here
      });
     });
    });

  });
 });
});