Question

我不只是一个使用Javascript的新手。我正在开发一个简单的网站来获取网络编程。网站很简单，结构如下：

一个简单的基于ul / li / css的导航菜单
当用户点击相应的菜单项时，使用jQuery将子页面加载到“div”中。
有些子页面使用不同的基于jQuery的插件，如LightWindow，jTip等。

加载子页面的jQuery函数如下：

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

菜单项会像这样触发loadContent方法：

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

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

就是这样。

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

基于上述，我几乎没有问题：

大多数插件都基于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>

Answer 1

假设您使用的是名为myPlugin的插件。你在index.html中初始化它是这样的：

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

现在，当您使用.load()动态加载内容并返回包含#selector的页面时，该插件将无效。原因很简单：当您调用#selector时，.myPlugin()元素不存在，因此加载的#selector不受影响。

使用.myPlugin()将插件应用于新元素后，您必须再次致电.load()：

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

专门回答您的问题：

不，包括jQuery一次就足够了。
您在index.html中调用它，加载的内容应该参与加载插件。
每次加载新内容时都必须初始化插件。

Answer 2

通常，对于插件，您需要在之后重新启动它们，以编程方式替换已应用它们的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"); });

Answer 3

如果插件是可以在浏览器中单独打开的html页面，可能应该使用页面片段加载

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

未加载整个页面（more）

可能我应该在名为

的插件页面上预定义函数

pluginInitialize（initParams在）;

加载插件时，从加载器页面调用

函数。该函数包含插件初始化逻辑（可能很复杂而且相当复杂）。

Answer 4

对jquery的调用只能在索引文件中使用一次。

如果您在子页面中使用jQuery，那么在某些场合，您必须在该实际子页面中再次调用它。

虽然，对于你的ul菜单和子页面来说，一个更方便的方法是，

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

对不起，如果有任何拼写错误，请在我的itouch上：）

jQuery .load（）和子页面

4 个答案: