Question

I have my html set up like this:

<li>
    Header
    <button>Edit</button>
</li>

And I was wondering if there is a way so that you can click on the li and have one action happen and click on the button and have another action happen. Right now if I have a jquery click element on the li it gets fired when you hit the button to. Is there a way to make this separate without changing the html structure?

Answer 1

You can use the event target also.

$('li').click(function(event) {
      var $tgt=$(event.target);
       if( $tgt.is('button') ){
          alert('button clicked');
       }else{
          alert('li clicked');
       }
});