jQuery 加载后访问主 javascript答案

【问题标题】：Access main javascript after jQuery loadjQuery 加载后访问主 javascript
【发布时间】：2012-03-19 22:05:34
【问题描述】：

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

我尝试使用 jQuery $().load() 函数来完成此操作，但这不允许我从页面 A 调用页面 B 的 javascript。

具体代码：我的页面 B 包含以下内容：

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({ });
});

我有一个功能，可以在轮播中添加一个新选项卡，并将页面（页面 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("/relativepath/" + $(this).attr('id'));
    });

这适用于静态内容（所以当我在轮播中有静态标签时）。现在我希望这也适用于动态添加的选项卡。例子：阶段 1：[选项卡 1][选项卡 2] 我单击选项卡 1 中的一个按钮，创建一个新选项卡并从 /a/relative/path 加载内容

第 2 步：[选项卡 1][选项卡 2][选项卡 3] 我单击选项卡 3 中的一个按钮，应添加新选项卡，并将另一个相对路径中的内容加载到轮播中。

我希望我把我的问题说清楚了 :)

【问题讨论】：

您必须在子窗口或 iframe 子窗口中打开两个页面才能让两个页面上的脚本交互。

标签： jquery ajax load carousel

【解决方案1】：

您需要“.on()”方法...每次我看到 AJAX 和绑定问题时，这通常就是答案。

$('body').on("click", '.ref', 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("/relativepath/" + $(this).attr('id'));
});

根据您的问题，我不确定这是否能解决您的问题，但您会注意到，当使用“.on()”而不是“.click()”时，它会监视初始选择器元素以查找 '在 '.ref' 上单击'，无论在解析 javascript/jQuery 时元素是否存在，或者在将 '.ref' 的元素添加到 DOM 之后。

【讨论】：