Jquery - run function when DOM element is added

jquery jquery-ui dom-manipulation dom-events mutation-events
Leonid picture Leonid · Apr 22, 2011 · Viewed 10.9k times · Source

I have a website with jQuery and jQuery UI. I have a Javascript function:

function ToButton()
{
$(".ToButton").button();
}

This function runing after the page load and change all elements with class "ToButton".

Also I change HTML code when user press a button. E.g.:

$("body").append('<span class="ToButton">Test Button</span>');

And I want to run ToButton function to this new element too, but live or delegate methods in jQuery don't have "show" or "create" event type. So I need call function ToButton() after all HTML code changes.

Can you help me, how I can delegate ToButton function to all elements?

Answer

ThiefMaster picture ThiefMaster · Apr 22, 2011

You need to do this manually after appending new elements. Delegates and live events are only for events that bubble up.

However, you could make life more easier by listening for some of the DOM events to get a notification when a new element has been added.

Related questions

Create a label using jQuery on the fly

I need to create a label and text field on the fly and also include datepicker for the textfield. I need something like this: <label for="from">From </label> <input type="text" id="from" name="…

Read More
jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More