logo标签列表

jQuery .load() 和子页面

jqueryload
3

我不仅仅是一个JavaScript的新手。我正在开发一个简单的网站来熟悉Web编程。这个网站很简单，结构如下：

  1. 一个基于ul/li/css的简单导航菜单
  2. 当用户点击适当的菜单项时，子页面将使用jQuery加载到“div”中。
  3. 一些子页面使用不同的基于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”内加载时无法正常工作。如果单独在浏览器中加载它们，则它们能够正常工作。

基于以上情况，我有几个问题：

  1. 大多数插件都是基于jQuery的，子页面是通过“loadContent”函数加载到“index.html”中的。我需要在每个子页面中都调用

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    吗？

  2. 如果一个页面使用了自定义的jQuery插件，那我应该在哪里调用它？在“index.html”中还是在使用它的页面中？

  3. 我认为，所有在“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>
4个回答
2
假设您正在使用名为myPlugin的插件。您可以在index.html文件中通过以下方式初始化它：
jQuery(function() {
    jQuery('#selector').myPlugin();
});

现在，使用.load()加载动态内容并返回包含#selector的页面时，该插件将无法起作用。原因很简单：当您调用.myPlugin()时，#selector元素不存在，因此加载的#selector不会受到影响。
您必须在使用.load()后再次调用.myPlugin()来将插件应用于新元素。
function loadContent(htmlfile) {
    jQuery('#content').load(htmlfile, function(response) {
        jQuery(response).find('#selector').myPlugin();
    });
}

针对你的问题作出具体回答：

  1. 不需要重复引入jQuery。

  2. 在index.html中调用它，加载的内容应该不会影响插件的加载。

  3. 每次加载新内容时都要重新初始化插件。

1
通常情况下，对于插件，你需要在以编程方式替换它们所应用的 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来确保它们在附加到的元素被替换后仍然完好无损。 (live) 手册说：

为所有与当前选择器匹配的元素附加事件处理程序，现在或将来。

例子：
$("a").live("click", function() {
    alert("this will alert even after this anchor has been replaced via ajax");
});
1
如果插件是可以在浏览器中独立打开的 HTML 页面，那么你可能应该使用页面片段加载。
$('#content').load('plugin.html #plugin-body');

不要加载整个页面（更多）

也许我应该在插件页面上预定义一个名为

pluginInitialize(initParams);

当插件被加载时，从加载器页面调用该函数。此函数包含插件初始化逻辑（可能是复杂的）。

0

在索引文件中应该只使用一次jquery调用。

如果您在子页面中使用jQuery，在某些情况下，您必须在实际的子页面中再次调用它。

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

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

抱歉如果有任何错别字，因为我是用itouch打的 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接