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

Question

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

How to use jScrollPane in conjunction with jQuery live() ? Further information on live () can be found here: http://api.jquery.com/live/

Thanks!

Jack

Answer 1

The live() method is great if you want to associate an element with an event, but which event would you use to keep the plugin stable? I don’t think there is one ...

Instead, you can put the plugin’s initial binding into a function, and then call that function after you have created the ajax div, like this:

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

I'm not quite sure that this is the best way to solve your problem, but that is how I do it.

Answer 2

I think this will be what 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 the id "jScrollPane", then initialize jScrollPane with the Ajax content returned from the jQuery request.

Martin