I need to apply a jquery function to some html that is loaded dynamically - document.ready alternative? |
[eluser]johnwbaxter[/eluser]
I'm using jquery to convert a multi-select field into a dropdown type box. My jquery function is called using document.ready. However, i also want this jquery function to be applied to some html i'm pulling in using ajax. I click a button and the new html gets pulled in, however, the jquery function is not called because the page had already completed loading. So my question is how can i get the function to be applied to the new bit of html? I've tried changing the function to Code: $("a#button_more_ajax").click( function() { This doesn't work, what should i be using here? I'm a bit of a jquery dunce (working on it though!) so any gentle help would be great! Thanks!!
[eluser]rogierb[/eluser]
Not that difficult:-) 1: create a new function, give it a name and put everything you want the button to do it it. 2: call the function with document.ready 3: attach the function to the onsuccess callback of your ajax call and voila...
[eluser]johnwbaxter[/eluser]
Hmm, i would do that but i'm working on someone elses system that they've built. All the ajax is done using yahoo YUI and i'm not sure how to call a jquery function from there. I was hoping for some jquery thingy that sort of errr keeps an eye on the page and when something happens re-applies itself. Perhaps i should have a look at how YUI works! Cheers!
[eluser]Neeraj Kumar[/eluser]
[quote author="audiopleb" date="1255369822"]I'm using jquery to convert a multi-select field into a dropdown type box. My jquery function is called using document.ready. However, i also want this jquery function to be applied to some html i'm pulling in using ajax. I click a button and the new html gets pulled in, however, the jquery function is not called because the page had already completed loading. So my question is how can i get the function to be applied to the new bit of html? I've tried changing the function to Code: $("a#button_more_ajax").click( function() { This doesn't work, what should i be using here? I'm a bit of a jquery dunce (working on it though!) so any gentle help would be great! Thanks!![/quote] you should use live function to bind methods to future elements also. here's the link of it's documentation: http://docs.jquery.com/Events/live
[eluser]Scal[/eluser]
I use livequery (http://docs.jquery.com/Plugins/livequery); which allows you to assign function to dynamically added elements.
[eluser]johnwbaxter[/eluser]
Live / livequery is what i need, however, i want it to execute when extra elements are added to the dom, not when something is clicked. However, i think this should work great. Thanks to everyone that has given advice, you are all great and fantastic. |
Welcome Guest, Not a member yet? Register Sign In |