jQuery .load（）和子页面

我不仅仅是一个使用Javascript的新手。我正在开发一个简单的网站来帮助我掌握网络编程。该网站是简单的结构是这样的：jQuery .load（）和子页面

一个简单的UL/LI /基于CSS的导航菜单
子页面中的“格”加载使用jQuery，当过用户点击相应的菜单项。
一些子页都在使用不同的基于jQuery插件，如LightWindow，jTip等

加载的子页面jQuery的功能是这样的：

function loadContent(htmlfile){ 
    jQuery("#content").load(htmlfile); 
};

菜单items fires loadContent method like this：

<li><a href="javascript:void(0)" onclick="loadContent('overview.html');return false">overview</a></li>

这会在“div”中加载子页面名称“overview.html”。

就是这样。

现在这工作正常，但使用jQuery插件的一些子页面在“div”中加载时效果不佳。如果你在浏览器中单独加载它们，它们工作正常。

上面我基于很少有qustions：

大多数的插件是基于jQuery和子页面加载里面的“index.html的” 使用“loadContent”功能。我一定要打电话

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
每个
和每个子页？
如果一个页面使用自定义的jQuery插件，那么我在哪里调用它？在“index.html”或我使用它的页面上？
我认为无论您在“index.html”中调用哪种脚本，都不要在您使用的任何子页面中再次调用它们。我在这里吗？

我所有的子页都与此类似：这是screenshot.html。工作正常，当我在浏览器本地加载，但不使用内部“的index.html” jQuery的load（）函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <script type='text/javascript' src='js/prototype.js'></script> 
     <script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script> 
     <script type='text/javascript' src='js/lightview.js'></script> 
     <link rel="stylesheet" type="text/css" href="css/lightview.css" /> 
    </head> 

    <body> 
     <h3 style="text-align:left;">Screenshots</h3> 

     <div align="center"> 
      <a class="lightview" href="images/ss_win1.png" title="Title"><img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/></a> 
      <a class="lightview" href="images/ss_win2.png" title="Title"><img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/></a> 
      <a class="lightview" href="images/ss_win3.png" title="Title"><img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/></a> 
     </div> 
    </body> 
</html>

来源

2010-05-30 user354051

通常情况下，插件加载时的工作，你将需要后重新初始化它们你编程更换他们已经应用的DOM，例如部分：

function loadContent(htmlfile){ jQuery("#content").load(htmlfile), function(response) { // this gets executed after the response has been inserted into the DOM jQuery(response).find("#someElement").fooPlugin(); }); };

事件处理程序，你可以简单地使用live或delegate，以确保它们保持不变后，它们所连接的元素就是被替换。在（现场）manual说：

附加一个处理程序事件当前选择现在或将来匹配其所有元素。

例子：

$("a").live("click", function() { alert("this will alert even after this anchor has been replaced via ajax"); });

来源

2010-05-30 16:21:48 karim79

假设你正在使用一个名为myPlugin插件。你初始化它里面的index.html像这样：当你使用动态和包含#selector返回页面加载内容

jQuery(function() { 
    jQuery('#selector').myPlugin(); 
});

现在，该插件将无法正常工作。原因很简单：当您调用.myPlugin()时，#selector元素不存在，因此加载的#selector不受影响。

你必须使用给插件应用到新元素后再次打电话给.myPlugin()：

function loadContent(htmlfile) { 
    jQuery('#content').load(htmlfile, function(response) { 
     jQuery(response).find('#selector').myPlugin(); 
    }); 
}

具体回答你的问题：

不包括jQuery的一次就够了。
您可以在index.html中调用它，加载的内容应该在加载插件时使用任何部分。
您必须在每次加载新内容时初始化插件。

来源

2010-05-30 16:24:21

对jquery的调用应该只在索引文件中使用一个。

如果你在你的子页面中使用jQuery，在一些场合你必须在实际的子页面内再次调用它。

虽然，你UL菜单和子网页的要容易上手得多的方法是，

$('ul#menu li a').click(function() { 
    var url = $(this).attr('href'); 
    $('#content').load(url); 
});

很抱歉，如果有任何错别字出现，我的iTouch的:)

来源

2010-05-30 16:29:12 duckbox

如果插件的HTML页面可以在浏览器中打开独立的，可能是你应该使用页面片段负荷

$('#content').load('plugin.html #plugin-body');

无法加载整个页面（more）

可能是我应该叫

pluginInitialize（initParams在）插件网页上的预定义的功能;

当插件被加载时，从加载器页面调用函数。这个函数包含插件初始化逻辑（可能复杂而且相当复杂）。

来源

2010-05-30 16:41:59

jQuery .load（）和子页面

回答

相关问题