Question

I have the html code like this :

<ul>
  <li k="5" id="l">
    <div>
        <div>
         Some Text
        </div>
    </div>   
  </li>
</ul> 

From the above code, if I dont have any div’s or spans or someother elements inside the li tag, then $(e.target).attr(“k”) will give correct value . But, as it has some other elements inside it, when I click the element, it gives undefined value . What is the solution ?

Answer 1

This is happening due to event bubbling. The event is actually firing not on the li but on one of its child/descendant elements. Therefore you are actually looking for the k attribute of that, not the li.

This doesn’t happen when there’s no child elements as there’s no potential for event bubbling – the event will always be triggered only by the li.

The simplest way round this is to use this inside the event callback rather than evt.target.

$('li').on('click', function() {
    var k = $(this).attr('k');
});