Question

我正在寻找一种方法将页面（页面A）（我也创建 - 因此不是Web上的外部页面）动态加载到现有页面（页面B）中。目标是在页面B中使用的Javascript / jquery中影响页面A的行为。示例：当单击pageA中的按钮时，我希望页面B上的Javascript对此做出反应。

我尝试使用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放入单独的文件中，并将主页链接为加载到此脚本的页面。然而，这并不能使他们分享上下文。

Answer 1

我怀疑这可能与它有关：来自JQuery docs for load（）：

“jQuery使用浏览器的.innerHTML属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会过滤文档中的元素，例如＆lt; html＆gt;，＆lt; title＆gt;或＆lt; head＆gt; elements。因此，.load（）检索的元素可能与浏览器直接检索文档时的元素不完全相同。“

您在第B页的javascript在哪里？在头部？

Answer 2

jQuery有一个单独的getScript方法用于动态加载JavaScript。

从页面A中删除内联代码并放入外部JavaScript文件，将其称为页面C.然后，在页面B上执行以下操作：

$.load('pageA.html', function(data) {
    $.getScript('pageC.js');
});

那就是说，我愿意打赌你可以通过重写页面C中的代码来完全消除getScript，因此它可以在.live DOM元素上运行，并以通常的方式加载pageC.js在页面B的<head>中。

Answer 3

在您下载页面后，尝试重新绑定您的活动。例如，如果你这样做

$(button).click(function(){blabla})

在你加载页面之前，加载.load的按钮不会受到影响。

我建议你在一个函数中绑定你的事件，然后在.load完成后调用它。但是不要因为双重执行而忘记取消绑定现有的绑定。

通过jQuery加载HTML内容

3 个答案: