jQuery how to execute event only on the inner element

Question

Is there is a smooth way to only let the inner element of a listitem do something? I read something here that using live complicates things.

Summation:

I have list elements that can contain a elements with a certain class.

The inner a elements are bound to a live click event handler. The list items themselves have also a click event handler.

Something like this

<li>some text<a class="someClassName">some text</a></li>

with the handler for the a tags

$('#somelist li a').live("click", function(e)

and this is how the event for li item is added

$(markers).each(function(i,marker){
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){
          showLocation(marker, i);
    })
    .appendTo("#somelist ");

Solution

Changing the click event above to .live("click", function(e) diddn't work. Instead I added all the a tags like above, so no mixup with live anymore. The solution from Alex might also work, and that way you could have all functionality contained in one function.

For now it turned out like this

$(markers).each(function(i,marker){
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){
        showLocation(marker, i);
    })
    .appendTo("#somelist");
    $("<a />")
    .html("<strong>"+ids[i]+"</strong>")
    .addClass('ol id')
    .click(function(){
        $('#ginfo').show();
        return false;
    })
    .appendTo(listitem);

oh, and this one has a nice picture to explain the bubbling

thanks, Richard

Answer 1

Have the handler for the <a> tags return false.

Answer 2

The live method in jQuery works via event delegation, which is the act of catching all the bubbled events from individual elements onto a common ancestor (in your case its document).

Stopping the propagation/bubbling of the click event occurs on the handler element (which is the common ancestor, not on the element itself) and exists way above the li that you are trying to avoid.

So by the time the stopPropagation method gets called, we've already traversed down the dom and passed the li element.

It's essentially putting a stop sign 200ft after the intersection.

So you'll either need to use bind and stopPropagation or find a different solution.

Here is an example of what I'm talking about: http://jsbin.com/ibuxo (check the console)

you can see the code or edit it at http://jsbin.com/ibuxo/edit

My suggested solution to this problem would be to use bind instead of live.

This requires you to do a little bit extra work, but it's not so bad.

You are probably using live because you are adding new elements, and you want them to have the same functionality. You should do this by binding them when you input them to the page. Here's an example

$(function(){
  var myAnchorHandler = function(e){
    alert('clicked!');
    e.stopPropagation();
    return false;
  };

  // initial bind
  $('#somelist li a').click(myAnchorHandler);

  // code where you input more li elements to the list with links
  $('#somelist').append(
    // bind your function to the element now, and then append it
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent()
  );
});

Answer 3

Thanks alex, never really thought of stopPropagation(); it worked for me. Thanks a lot, good to have guys like you around :)Thanks alex, never really thought of stopPropagation(); it worked for me. Thanks a lot, good to have guys like you around :)