Using jQuery's live() function on calling a plugin?

Question

Hi folks,

So I have a plugin - jScrollPane - http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html - which is awesome, but, I want to apply it to an Ajax-generated div.

How would I use jScrollPane in conjunction with jQuery's live()? Further info on live() can be found here: http://api.jquery.com/live/

Thanks!

Jack

Answer 1

The live() method is great when you want to bind an element to an event, but what event would you use to keep the plugin persistant? I don't think there is one...

What you can do instead is put the initial plugin bind in a function, then call that function after your ajax generated div is in place, like this:

function setPlugins() {
    $('#abc').myPlugin();
}

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     setPlugins();
   }
 });

I'm not entirely sure if this is the best way to solve your problem, but this is how I have been doing it.

Answer 2

Hi Jack,

I think this will be the type of thing you need.

$(function()
{
    initialise_jScrollPane = function() {
        $("#jScrollPane").jScrollPane();
    }

  // Update contexts using live jquery ajax link
    $("a#ajax_load_link").live("click", function() {
        $("<div/>").attr({"id": "jScrollPane"}).appendTo("body").load("ajax_page.html", "", initialise_jScrollPane);
    });
});

This will create a div element with an id of "jScrollPane" then initialize a jScrollPane with the Ajax content returned from the jQuery request.

Martin