通过jQuery加载HTML内容
我正在寻找一种方法来加载页面(页面A)(我也创建 - 所以不是网页上的外部页面)动态加载到现有页面(页面B)。目标是影响页面B上使用的Javascript/jquery中页面A的行为。 示例:单击pageA中的按钮时,我希望页面B上的Javascript对此做出反应。通过jQuery加载HTML内容
我试图做到这一点使用jQuery $()load()函数,但是这并不让我从一个页面A.调用网页B的JavaScript的
具体代码: 我的网页B包含此:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
initCallback : carousel_callback
});
});
而且我将添加一个新的标签,从页面(A)的旋转木马和内容加载到该选项卡的功能。
$('.ref').click(function() {
var newTabId = jQuery('#mycarousel').jcarousel('size') + 1;
carousel
.add(
newTabId,
"<li style='width: 50%;'><div id='tab" + newTabId + "' style='height: auto;'></div></li>");
// load content
$("#tab" + newTabId).load("/researchPad" + $(this).attr('id'));
});
这适用于静态内容(所以当我在旋转木马中有静态选项卡)。现在我想这也适用于动态添加的选项卡。
作为建议的反应之一,我尝试将JavaScript放入一个单独的文件中,并将主页面链接为加载到此脚本的页面。然而,这并不能让他们分享上下文。
我怀疑这可能是与它:从jQuery文档负载():
“jQuery使用浏览器的.innerHTML属性来解析检索文档,并将其插入到当前文档。在此过程中,浏览器通常会过滤来自文档的元素,例如< html>,< title>或< head>元素。因此,由.load()检索的元素可能与文档不完全相同通过浏览器直接检索“。
您的JavaScript在页面B中在哪里?在头部?
jQuery有一个独立的getScript
动态加载JavaScript的方法。
从网页A删除你的内嵌代码,并放置到一个外部JavaScript文件,称它为页。然后,在页面B,做这样的事情:
$.load('pageA.html', function(data) {
$.getScript('pageC.js');
});
这么说,我敢打赌您可以通过在第C重写代码完全消除getScript
所以它.live
DOM元素进行操作,并在网页B的<head>
你.load你的页面
感谢您的建议,但这不完全是我的意思;我已经在原始问题中描述了确切的问题。 – user485659 2012-03-19 18:06:12
之后通常的方式加载pageC.js,尝试重新绑定你的活动。例如,如果你这样做
$(button).click(function(){blabla})
在加载你的页面之前,加载.load的按钮不会受到影响。
我建议你在一个函数中绑定你的事件,然后在.load完成后调用它。但是不要忘记由于双重执行而解除绑定现有的绑定。
为什么不在两个页面上包含相同的JavaScript? – jrummell 2012-03-19 14:58:14
我会尽量让我的问题更具体(当然,我不能在这个时候展示一个例子):页面B包含一个持有加载页面的jCarousel。在页面A中单击按钮时,应将新选项卡添加到加载新内容的轮播中。所以我不只是需要页面B的JavaScript功能,我也需要上下文。这就是为什么我试图寻找一种方法来引用A页面B的JavaScript'上下文'。 – user485659 2012-03-19 15:11:23
因此,用'.load()'加载你的html(上下文),然后在两个页面中引用相同的js页面。没有看到一些代码,它很难完全理解你想要做什么。 – jrummell 2012-03-19 15:15:40