Question

I have this (simplification):

$(li).click(function{alert("test");});

<li>
   <input>
</li>

What’s the best way to bind an event to li but not fire when the user clicks on the input element?

Answer 1

Try using the stopPropagation method on the Event object.

$('input').click(function(event) {
    event.stopPropagation();
});

You could also target specific children (or direct children) of li using a combination of selectors:

$('li > input, li strong, li span').click( ... );