jQuery different binds on containing div and button inside

So I have a button inside a list row that is used to delete the row from the page (calls ajax stuff to delete the object represented by the row, but that's not important for my question). The whole row is bound to a click event which would redirect to another page.

In other words, the containing row is click bound and the inner button is click bound, which is causing me problems since clicking the inner button also triggers the containing row click event (as it should).

I've tried binding a hover event for all delete buttons that unbinds the row click on mouseover, and rebinds it on mouseout, like this pseudocode below:

$('.delete-button').hover(
  function() {
    $('.list-row').unbind();
    $('.delete-button').bind('click', function() { /* delete action */ });
  },
  function() {
    $('.delete-button').unbind();
    $('.list-row').bind(开发者_JS百科'click', function() { /* list row action */ });
  }
);

This isn't working very well, and I'm convinced there is a better way to approach it. Should I take the button out of the containing list-row? It's way easier to have it in there since my list row contains custom attributes that have data I need for the ajax calls and I can just var rid = $('.delete-button).parent().attr('row-id'); to get the data, but I'm not opposed to change :)

Thanks!

---

In your click event handler for the button, you need to call e.stopPropagation(). This will prevent the event from bubbling up the DOM tree. More info here: http://api.jquery.com/event.stopPropagation/

---

edit: you already accepted (thanks!), but maybe this code snippet would help explain some of the concepts better:

$('.list-row').click(function() {
    /* list row action */
});

$('.delete-button').click(function(e) {
    // die, bubbles, die
    e.stopPropagation();
    // if you also need to prevent the default behavior for the button itself,
    // uncomment the following line:
    // e.preventDefault();
    // note that if you are doing both e.stopPropagation() AND e.preventDefault()
    // you should just `return false;` at the end of the handler (which is jQuery-
    // sugar for doing both of these at once)

    /* delete action */
})

---

There's a few ways of approaching this. As @jmar777 has already said you may attach an altered event to the click handler on the button, stopping propagation.

If you want to do this with the same function as you're applying to the div then you can approach it as such:

if($(event.target).is("input")) {
      event.stopPropagation();
}

Another approach is to actually not bind the click event to the button, for any time the browser supports clicks on the containing element. As you will always trigger that, then you don't actually need the button to handle it too! This does require you to handle IE6 etc a little differently from everything else though...

---

Let your handler function return false