Question

I have an event attached to a div element that will remove the element onclick. I also have a jQuery live event that I am attaching to the same element like so,

$("#divEle").live('click', function() {
    alert($(this).html());
});

In FF, this event executes. But in IE8 the first event removes the element and the live event never takes place. I assume this has to do with the way the browsers bubble the events, but I need to find a way to get both of these events to take place.

Here is a small example of the code, and it would not matter which event is first. I tried both. I assume this is because live requires propagation, and click does not.

$(function() {
    $("#myele").live('click', function() {
        alert('works in ff');
    });

    $("#myele").click(function() {
         $("#myele").remove();
    });
});

Thanks for any help!
Metropolis

UPDATE

Sorry I left something out. The element is getting removed using a plugin function. So I need the functions to work together separately.

Answer 1

Gecko supports up/down bubbling, but IE only supports up bubbling. You might need to call the following on the remove event:

event.stopPropagation (for gecko)
window.event.cancelBubble = true (ie)

Here’s a more complete solution:

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Read http://www.quirksmode.org/js/events_order.html for more info

Here is a more accurate link for what the author was looking for: http://www.bennadel.com/blog/1822-Learning-jQuery-1-4-Remove-vs-Detach-.htm