CODEWITHSUNDEEP
jquery
cKendrick
cKendrick

Reputation: 207

Jquery Click in li

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?

Upvotes: 0

Views: 67

Answers (3)

charlietfl
charlietfl

Reputation: 171669

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');
       }
});

Upvotes: 0

Cymen
Cymen

Reputation: 14419

Yes, you can use event.stopPropagation on the handler for the button:

$(document).ready(function() {
    $('li').click(function() {
        alert('li clicked');
    });

    $('button').click(function(event) {
        event.stopPropagation();
        alert('button clicked');
    });
});​

Demo: jsfiddle

Upvotes: 0

wirey00
wirey00

Reputation: 33661

inside the button click event handler use event.stopPropagation() - this will stop the event from bubbling up to the li

button.click(function(event){
      event.stopPropagation();
});

Upvotes: 1

Related Questions