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.