Run function when element is loaded into document from dynamically created page

Question

I read here: jQuery's .on function doesn't seem to like 'load' event that .load doesn't work, "In all browsers, the load event does not bubble".

I'm trying NOT to use $(function(){tabs();}); on every page that I need the 'tabs' function to run on. So how do I run a function from a page when the div .tabswrap class is loaded into the document?

The page dynamically loaded has a div class named 'tabswrap':

The tabs function:

function tabs(){
//do something
}

This does work if I put the script on the dynamically loaded page itself (which I'm trying to avoid):

<script>
$(function(){
   tabs();
});
</script>

These don't work:

$('.tabswrap').on('load', function(){
   tabs();
});

$('.tabswrap').load(function(){
   tabs();
});

Answer 1

you can rise your own event via trigger when you are loading the dynamic content and do your stuff.

var data=".myclassname";
$('body').trigger('tabswrapOnLoad');
....
$('body').on('tabswrapOnLoad', data, function(){ do stuff });

Answer 2

What I'm getting from your story is that you load dynamic content with a div.tabswrap and whenever that new content is loaded, you want to execute the tabs() function, correct?

The reason why it doesn't work is you're trying to bind to an element that does not yet exist. You can only bind to events on elements that exist. Also the load event is not triggered when you insert a node into the dom, so that would not work even after the dom is updated. Try something like:

<script> 
function tabs() {
    // something
}

function loadNewContent() {
   // get dynamic content from somewhere
   $('.content').html(newContent);
   if ($('.tabswrap', $(newContent)).size() > 0) {
       tabs();
   }
}
</script>

Answer 3

As I was saying in comment: We had to solve this for a group of plugins that needed to be arbitrarily applied to loaded pages.

Solution: We trigger our own "panel.loaded" event inside the Ajax load(s), passing the new panel as a property. The top-level page code catches the panel.loaded event and applies plugins based on matching classes within in the loaded page.

eg

Inside your Ajax load:

var e = jQuery.Event("panel.loaded", {$panel: data});
$(document).trigger(e);

Inside your master page:

$(document).on('panel.loaded' function(e){
    // 1) Find a specific part of the loaded panel
    tabs(e.$panel.find('.tabswrap'));

    // Or 2) simply pass the loaded panel to tabs
    tabs(e.$panel);

    // Or 3) you don't really care about the panel loaded and 
    //       will simply apply tabs again to the entire page 
    tabs();
});

This implementation implies a version of tabs() that can take the loaded panel as an argument. Otherwise it may be reapplying to the entire page. That is your call as you have not provided the code for tabs() .

Simple Mockup: http://jsfiddle.net/TrueBlueAussie/z4GK7/3/

Simpler version.

You can also pass an additional, separate, property object to trigger , avoiding the need to create an Event object.

eg

$(document).trigger("panel.loaded", {$panel: data});

and use with:

$(document).on('panel.loaded' function(e, params){
    // 1) Find a specific part of the loaded panel
    tabs(params.$panel.find('.tabswrap'));

    // Or 2) simply pass the loaded panel to tabs
    tabs(params.$panel);

    // Or 3) you don't really care about the panel loaded and 
    //       will simply apply tabs again to the entire page 
    tabs();
});