0

我将相同的页面动态加载到 div 中.load()。每个页面的 div 被加载到主页上的两个窗格中。有用。我想要做的是让 JavaScript 处理子页面中包含的链接。子页面上只有一个列表。

链接必须是相对于根目录的，但是以同样的方式链接 JS 文件是行不通的。无论我说 .js 文件位于何处，都不会发生任何事情。只是最初的 .load() 函数。

有没有我添加到代码中的东西，或者找到它在哪里寻找 .js 文件的方法？

这是与.load()

$(document).ready(function() {
    //#left and #right are divs loading content from .content/.description
    $('#left').load('demos/websites.html .content');
    $('#right').load('demos/websites.html .description');
    $('nav#subnav li a').click(function() {
        var page = $(this).attr('href');
        $('#left').load(page + ' .content');
        $('#right').load(page + ' .description');
        return false;
    });
});
4

4 回答 4

3

你最好使用事件委托。由于.load()调用是异步的，它们在未收到响应时立即返回，并且.click()绑定仅在执行时考虑 DOM 中存在的元素。

$(document).on('click', 'nav#subnav li a', function() {
  ...
});

从 jQuery 1.7 开始，.on()推荐使用此方法。

于 2013-02-26T12:22:38.167 回答
1

看起来是时间问题。使用 load 的回调函数注册点击事件。

 $('#left').load('demos/websites.html .content',function() {
       console.log('Left pane loaded');
  });
于 2013-02-26T12:25:01.460 回答
0

当您使用.load带有后缀选择器表达式的函数时.js，您尝试加载的页面中包含的文件不会被执行，就好像它们根本不包含一样。

那么你有两个选择：

  1. 使用.load没有后缀选择器表达式的函数

  2. 或者.js在邮件页面中包含文件，然后像这样加载内容后执行所需的功能

    $('#left').load('demos/websites.html .content',function() { //在这里执行你的js函数。});

来自 jQuery 网站：

脚本执行

当使用没有后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此不会执行。两种情况的示例如下所示：

在这里，作为文档的一部分加载到#a 中的任何 JavaScript 都将成功执行。

1. $('#a').load('article.html');

但是，在以下情况下，正在加载到 #b 的文档中的脚本块被剥离并且不被执行：

1. $('#b').load('article.html #target');
于 2013-02-26T12:38:46.203 回答
-1

这是您的完整代码，其中包含 Alexander 的建议。

 $(document).ready(function() {
  //#left and #right are divs loading content from .content/.description
  $('#left').load('demos/websites.html .content');
  $('#right').load('demos/websites.html .description');

  $(document).on('click', 'nav#subnav li a', function() {
    var page = $(this).attr('href');

    $('#left').load(page+' .content');
    $('#right').load(page+' .description');
    return false;

  });
});

但请确保您使用的是 jquery 1.7 或更高版本。

代码不起作用的原因 - 当您将点击处理程序绑定到链接的语句时，可能当时链接可能不会在 DOM 本身中加载。

于 2013-02-26T12:33:53.913 回答