CODEWITHSUNDEEP
jquery
HGPB
HGPB

Reputation: 4366

Jquery "live" event not firing

I'm having trouble with the live event which is necessary as I am dynamically adding elements to a page.

A regular click event works fine. I want to know why the live click event is failing. There are instructions in the demo I set up at JSFiddle. Maybe someone can explain to me why this is happening.

Demo: http://jsfiddle.net/MezfS/2/

Thanks for your time.

Upvotes: 2

Views: 769

Answers (3)

HGPB
HGPB

Reputation: 4366

Fixed it with delegate and allowing the click event to bubble as far as the anchor:

$('#pui-tabs a').delegate('.tab-close', 'click', function(e) {
        tabselector.tabs('remove', tabselector.tabs('option', 'selected'));
});

http://jsfiddle.net/MezfS/21/

Upvotes: 0

Simone Gianni
Simone Gianni

Reputation: 11662

"live" events behave differently than normal events handler. When you bind a live event, an event handler is appended to one of the topmost elements in the page (say body, or document). Since when you click anywhere on the page, you are also clicking on the body, the event will bubble up. For example, you click on a link, which is contained in a div, which is contained in the body, the event will be triggered for the link, the for the div, then for the body.

When the event reach the body, the "live" event handler will look at it, and if the source of the click matches your selector, it will trigger your function.

UNLESS one of the handlers on the link or the div stopped the event propagation. In that case, the event is stopped and will not bubble up, never reaching the "live" handler.

I suppose that jQuery UI places an handler on the tab, to capture clicks, and that handler is actually stopping propagation, making the "live" handler useless.

Upvotes: 3

karim79
karim79

Reputation: 342635

.live relies on the event bubbling all the way up to document, and you are stopping the immediate propagation of the your handler, thereby stopping it from working. Try this instead:

$('li[id=^="tab"]').delegate(".tab-close", "click", function(e) {
    e.stopImmediatePropagation();
    tabselector.tabs('remove', tabselector.tabs('option', 'selected'));
});

Upvotes: 1

Related Questions