jQuery propagation order weirdness

Question

Hi!

I've simplified the HTML and Javascript.

The HTML structure

ul -> li -> a

The javascript

var $ul = $('#the-list');

$ul.find('a').click(function(e){
    e.stopImmediatePropagation();
    console.debug('a');
});

$ul.unbind('click').click(function(){
    console.debug('ul');
});

The problem

The first time a link is clicked, everything works fine. But after the list content is updated with $ul.html(newHtml) and the code above is run again, the event on $ul is called first.

First time:

1. a
2. Stops there

Second time:

1. ul
2. a

What would cause such a behaviour? Please excuse the reverse structure of this question

Answer 1

If you're wiping out the contents of your ul, you shouldn't bind event listeners to the contents; instead, bind a click listener to the ul itself, and you can listen to click events on the ul as well as its children, all in one listener. This is called event delegation.

$ul.click(function (e) {
    var $target = $(e.target);
    console.log($target);
});

If you want to specifically listen for click events on the ul and anchor elements it contains, you can use $.live():

$ul.add($ul.find('a')).live('click', function (e) {
    console.log(e.target);
});

Should give you the click events you want. I'm not 100% sure of this, since .add might change things a bit, but that's the basic idea. Testing this now.