Retrigger my jquery function on ajax load

Question

I have built a plugin that I run on document ready

$("#pagecontainer").gumbyPageTransition();

I have a JQuery plugin binding all href with the class pageref to a click event.

$("a.pagehref").on('click', function(event){.....

The function loads pages over ajax with transition when the user clicks href:s. At the end of the function I reload the plugin by calling it again:

....
$("#pagecontainer").gumbyPageTransition(); //To bind click events on the newly loaded page

My problem is that on certain pages I load data in to ul li:s with click events and these doesnt get bind by the click function.

In other words:

1. I run my plugin in document ready to bind click events to load pages through ajax
2. When I fetch a page I run my plugin again to bind the pages href to my plugin (to get more pages)
3. When a page is loaded the function "pageloaded" is triggered. On pageloaded I sometimes update a list (ul li). The list contains href that I need to bind. I need a function similare to .listview('refresh'); in jquery mobile. How do I do that?

Thanks

Answer 1

You should attach .on further up the tree and specify a selector (for existing and future elements) as an optional argument.

Instead of

$('a.pagehref').on('click', function(event)
{
    // ...
});

attach .on to document

$('document').on('click', 'a.pagehref', function(event)
{
    // ...
});