Отмена привязки событий с помощью jQuery

Question

Я просто подойду к делу. У меня есть такой стол:

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

Тогда у меня есть немного JavaScript, например:

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

Что все это делает, это показывает таблицу с одной строкой, последний столбец которой содержит ссылку. Если щелкнуть ссылку, копия будет сделана из строки и вставлена ​​перед строкой. В этом процессе класс элемента ссылки переключается с «добавить» на «удалить», а текст ссылки переключается на «Удалить».

Теперь суть в том, что вы должны иметь возможность добавлять новые строки, щелкая ссылку «Добавить» в нижней строке, а удалять новые строки, щелкая ссылки «Удалить».

К сожалению, ссылки «Удалить» по-прежнему действуют как ссылки «Добавить», добавляя новые строки. Unbind должен был позаботиться об этом, но по какой-то причине это не так. Однако предупреждение все еще отображается.

Answer 1

Проблема, которую я обнаружил, была синтаксическая ошибка в событии click после unbind ().Кажется, это работает так, как вы хотели, независимо от того, находится ли привязка в ряду или фактическая привязка.Кроме того, вы заменяли текст всей строки словом «удалить», а не текстом привязки.

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

Answer 2

Вместо отмены привязки другой подход заключается в использовании обработчика одного щелчка и изменении его поведения в зависимости от его состояния при нажатии. Предполагая, что <a> элементы управления теперь имеют класс 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');
});

Answer 3

unbind должен быть на теге, а не на 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);
    });
});

Answer 4

Для unbind , вы не можете давать ему аргументы, в этом случае все обработчики событий не связаны. Вы также можете дать ему строковую ссылку на тип обработчика для отмены привязки (например, «щелкнуть»). Наконец, вы можете дать ему переменную, которая ссылается на фактическую функцию, которую вы к ней привязали. Предполагая, что вы не привязываете никакие другие обработчики кликов, вы можете отменить привязку следующим образом:

$(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);
    });
});

Если вы связываете другие обработчики кликов, попробуйте:

$(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);
});