加载jQuery后访问主javascript

Question

我正在寻找一种方法来动态加载一个页面(页面A) (我也创建了-所以不是网络上的一个外部页面)到一个现有的页面(页面B)。其目标是在页面B上使用的Javascript/jquery中影响页面A的行为。示例:当单击pageA中的按钮时，我希望页面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'));
    });

这适用于静态内容(所以当我在carousel中有静态选项卡时)。现在，我希望这也适用于动态添加的选项卡。示例:阶段1:选项卡1单击选项卡1中的按钮，将创建一个新选项卡，并从/a/relative/path加载内容

阶段2:标签1标签3我点击标签3中的一个按钮，应该会添加新的标签，并且来自另一个相对路径的内容应该被加载到轮播中。

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

Answer 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时是否存在，或者在向DOM中添加了一个“.ref”元素之后。