Unbinding events with jQuery

I'll just get right to the point. I've got a table like this:

<table>
    <tr id="template">
        <td>Some text</td>
        <td><a class="add">Add</a></td>
    </tr>
</table>

Then I've got some JavaScript, like this:

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td.button a').removeClass('add').addClass('remove').te开发者_如何学Cxt('Remove');
        newRow.unbind(event).click(function()) {
            alert('Put some remove row code here');
        });
        $('#template').before(newRow);
    });
});

What this all does is to show a table with a single row, whose last column contains a link. If you click the link, a copy is made of the row and inserted before the row. In that process, the class of the link element is switched from "add" to "remove", and the text of the link is switched to "Remove".

Now, the point of this is that you're supposed to be able to add new rows by clicking on the "Add" link of the bottom row, and remove new rows by clicking on their "Remove" links.

Unfortunatly, the "Remove" links still acts like the "Add" link, adding new rows. The unbind was supposed to take care of that, but for some reason it doesn't. The alert is still displayed, though.

---

The issue I found was a syntax error on the click event after unbind(). It seems to work the way you wanted whether the unbind is on the row, or the actual anchor. Also, you were replacing the text of the entire row with 'remove' rather than the text of the anchor.

$('a.add').click(function() {
    alert();
    var newRow = $('#template').clone();
    newRow.removeAttr('id');
    newRow.find('td.button a').removeClass('add').addClass('remove');
    $('a',newRow).text('Remove');
    newRow.unbind().click(function() {
        $(this).closest('tr').remove();
    });
    $('#template').before(newRow);
});

---

unbind should be on the a tag rather than the newRow.

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td a').removeClass('add').addClass('remove').text('Remove')
            .unbind(event).click(function() {
                alert('Put some remove row code here');
            })
        $('#template').before(newRow);
    });
});

---

For unbind, you can give it no arguments, in which case all event handlers are unbound. You can also give it a string reference to the type of handler to unbind (e. g. 'click'). Finally you can give it a variable that references the actual function you bound to it. Assuming you are not binding any other click handlers, you can unbind as follows:

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td.button a').removeClass('add').addClass('remove');
        newRow.text('Remove');
        newRow.unbind('click').click(function()) {
            alert('Put some remove row code here');
        }
        $('#template').before(newRow);
    });
});

If you are binding other click handlers, try:

$(document).ready(function() {
    var addHandler = function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td.button a').removeClass('add').addClass('remove');
        newRow.text('Remove');
        newRow.unbind(addHandler).click(function()) {
            alert('Put some remove row code here');
        }
        $('#template').before(newRow);
    });
    $('a.add').click(addHandler);
});

---

Instead of unbinding, another approach is to use a single click handler, and change its behavior based on its state when clicked. Assuming the <a> controls now have the class addremove:

var buildRow = function(){
  var newRow = $('#template').clone();
  newRow.removeAttr('id');
  newRow.find('td.button a')
    .removeClass('add')
    .addClass('remove')
    .addClass('addremove');
  newRow.text('Remove');
  $('#template').before(newRow);
}

$('a.addremove').click( function(e){
  e.preventDefault();
  if( $(this).hasClass('remove') ){
    code_to_remove_row_goes_here();
  } else {
    buildRow();
  }
  $(this).toggleClass('add remove');
});