Question

I’m looking for a way to load a page (page A) (which I also create – so not an external page on the web) into an existing page (page B) dynamically. The goal is to influence the behavior of page A in the Javascript/jquery used on page B.
Example: when a button in pageA is clicked, I want Javascript on page B to react on this.

I’ve tried to accomplish this using the jQuery $().load() function, but this doesn’t allow me to call the javascript of page B from page A.

The concrete code:
my page B contains this:

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

And I have a function that will add a new tab to the carousel and load content from a page (page A) into this tab.

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

This works for static content (so when I have static tabs in the carousel). Now I want that this also works for the tabs which are added dynamically.
Example:
Phase 1: [tab 1][tab 2]
I click on a button in tab 1, a new tab is created and the content is loaded from /a/relative/path

Pase 2: [tab 1][tab 2][tab 3]
I click on a button in tab 3 and new tab should be added and content from another relative path should be loaded into the carousel.

I hope I made my questions clear 🙂

Answer 1

You’re in need of the “.on()” method… Every time I see an AJAX and binding question this is usually the answer.

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

Based off your question, I’m not sure if this solves your problem, but you’ll notice that when using “.on()” instead of “.click()” it watches the initial selector element for a ‘click’ on ‘.ref’ no matter if the element exists when the javascript/jQuery is parsed, or after an element of ‘.ref’ is added to the DOM.