2

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?

000
  • 26,951
  • 10
  • 71
  • 101
Leonid
  • 61
  • 2
  • 2
  • 3

4 Answers4

2

You can achieve this a couple of ways:

1) Use Mutation Events or Observers

The first method is easy to look-up, you can find more on DOM Level 3 Mutation Events here: http://help.dottoro.com/ljmcxjla.php - and new DOM Level 4 Mutation Observers here: https://developer.mozilla.org/en-US/docs/DOM/MutationObserver

While DOM Level 3 Mutation Events are widely supported now, they are a deprecated API that can kill performance in certain browsers. #2 below uses a method that works in all browsers that support CSS Animations, and it doesn't hurt performance.

2) Use the CSS Keyframe Animation event method I devised to detect DOM node insertions

You can use a dummy keyframe animation event to bubble up an insertion event notification whenever a node is parsed by the browser's internal CSS styling mechanisms, I wrote a very detailed post on this here: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

csuwldcat
  • 8,021
  • 2
  • 37
  • 32
2

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.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
0

uhm, not sure if I got it right, but doesn't this work?:

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

just for your refference: http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm

Vlad Khomich
  • 5,820
  • 1
  • 27
  • 39
  • Hello! Thank you for answer. I think, that your code can work, but I need don't use a button() or ToButton() function several times. I want "delegate" this function one time and don't use it on page again. – Leonid Apr 22 '11 at 07:56
  • well, as ThiefMaster correctly pointed out, you won't be able to to this with delegate or live. Theoretically you could imlement a kind of functionality you want but, seriously, there's just no need for this. It this case, the perfectly valid solution is to just use .button() on newly created element – Vlad Khomich Apr 22 '11 at 08:03
0

You could create a simple function like this:

function AddButton (parent, buttonElement) {
    $(buttonElement).addClass('.ToButton').appendTo($(parent)).button();
}

Use like 

AddButton('body', '<span>Test Button</span>');

Not the nicest way, but you could also create a simple jQuery plugin or something like that. I just presented a general idea (I put it like this because you used a function built in a similar way).

Of course the best would be to use DOM events, but thanks to IE we cannot.

kapa
  • 77,694
  • 21
  • 158
  • 175