jQuery different binds on containing div and button inside
<p>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. </p>

<p>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).</p>

<p>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:</p>

<pre><code>$('.delete-button').hover(
  function() {
    $('.list-row').unbind();
    $('.delete-button').bind('click', function() { /* delete action */ });
  },
  function() {
    $('.delete-button').unbind();
    $('.list-row').bind('click', function() { /* list row action */ });
  }
);
</code></pre>

<p>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 <code>var rid = $('.delete-button).parent().attr('row-id');</code> to get the data, but I'm not opposed to change :)</p>

<p>Thanks!</p>
