2013-02-26 88 views
0

我使用​​将相同的页面动态加载到div中。将每个页面的div加载到主页面上的两个窗格中。有用。我想要做的是让JavaScript在子页面中包含的链接上工作。这些子页面上只有一个列表。使用jQuery .load()加载的页面不响应其他JavaScript

链接必须是相对于根,但以相同方式链接JS文件不起作用。无论我说的.js文件位于何处,什么都不会发生。只是最初的.load()函数。

有没有东西我添加到代码,或找到它在哪里寻找.js文件?

这是​​

$(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; 
    }); 
}); 

回答

3

你最好用事件代理功能。由于​​调用是异步的,因此它们在没有收到响应时立即返回,并且.click()绑定仅在执行时考虑DOM中存在的元素。

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

在jQuery 1.7,.on()是这样做的推荐方式。

1

看起来像一个计时问题。使用load的回调函数来注册点击事件。

$('#left').load('demos/websites.html .content',function() { 
     console.log('Left pane loaded'); 
    }); 
-1

以下是亚历山大推荐的完整代码。

$(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本身加载链接。

+0

如果你认为我的问题可能会更好理解提供完整的代码你可以让我知道,我很乐意详细说明我自己的答案:) – Alexander 2013-02-26 12:38:26

+0

:)是的,我可以。感谢您指出。 – Ankit 2013-02-26 12:45:35

0

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

,那么你有2种选择:

  1. 使用.load没有后缀选择表达功能
  2. 或包含在邮件页面的.js文件,然后加载这样

    内容后,再执行所需要的功能

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

从jQuery的网站:

脚本执行

致电时.load()使用URL不具有后缀选择器表达式,该内容被传递到.HTML()被移除脚本之前。这会在脚本块被丢弃之前执行。如果。调用load()时会在URL中附加一个选择器表达式,但是,在更新DOM之前,脚本会被剥离,因此不会执行。这两种情况的例子如下:

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

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

但是,在以下情况下,在文档中的脚本块被加载到#b的被剥离出来,不执行:

1. $('#b').load('article.html #target'); 
相关问题