Неработающие элементы JavaScript - jQuery

Question

У меня есть таблица, как показано ниже;

<table id="mytable"> 
    <tr> 
     <td>cola1</td> 
     <td>cola2</td> 
     <td>cola3</td> 
     <td class="rem">cola4</td> 
    </tr> 
    <tr> 
     <td>colb1</td> 
     <td>colb2</td> 
     <td>colb3</td> 
     <td class="rem">colb4</td> 
    </tr> 
</table> 

<button id="but">Add Row</button> 

Кнопка <button id="but">mybutton</button> находится в нижней части таблицы, которая по щелчку, добавляет новую строку в таблицу. Последний столбец строк имеет класс rem, который имеет функцию для удаления родительской строки при щелчке.

Вот Javascript

$(document).ready(function() { 
    $('#but').click(function() { 
     row = $("<tr></tr>"); 
     col1 = $('<td>colex1</td>'); 
     col2 = $('<td>colex2</td>'); 
     col3 = $('<td>colex3</td>'); 
     col4 = $('<td class="rem">colex4</td>'); 
     row.append(col1,col2,col3,col4).prependTo("#mytable"); 
    }); 

    $('.rem').click(function() { 
     var $button = $(this); 
     var $row = $button.closest('tr'); 
     $row.fadeOut('slow'); 
    }); 
}); 

Функция хорошо работают в указанных выше двух рядов. Но кнопка удаления не работает в строках, добавленных jQuery. Как я могу заставить Javascript добавлять строки, как другие?

Here является скрипкой.

Answer 1

Вам необходимо использовать делегированный обработчик событий, используя on(), если вы хотите, чтобы он применялся к вновь созданным элементам. Способ, которым это работает, заключается в добавлении обработчика к элементу, который уже (и продолжает) существовать в DOM, а затем в обработчике, по мере того как событие пузырится вверх, он проверяет, соответствует ли цель события селектору, поданному на функцию on(). Если это так, то он запускает обработчик, иначе это не так.

$('#mytable').on('click','.rem',function() { 
    var $button = $(this); 
    var $row = $button.closest('tr'); 
    $row.fadeOut('slow'); 
}); 

Answer 2

Попробуйте это:

$('#mytable').on('click', '.rem', function() { 
    var $button =$(this); 
    // ... 
}); 

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

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

Answer 3

Вы можете использовать

.live(event, handler) 

В этом случае обработчик события будет приложена к будущим элементам также. так использовать:

$('.rem').live('click', function() { 
    var $button = $(this); 
    var $row = $button.closest('tr'); 
    $row.fadeOut('slow'); 
}); 

Однако по состоянию на JQuery 1.7 живой() является устаревшим, используйте на()

Answer 4

Ваш обработчик щелчка работает на существующих строк только потому, что они существуют, когда вы это называете. Для будущих элементов не в DOM, хотя вам нужно использовать метод делегирования, который учитывает как текущие, так и будущие элементы. Для этого используйте на() делегированные к столу (или элемент дальше, что всегда будет существовать) и добавить класс кнопку в селекторе

$('#mytable').on('click','.rem',function() { 
    var $button = $(this); 
    var $row = $button.closest('tr'); 
    $row.fadeOut('slow'); 
}); 

Answer 5

Я думаю, что многое из этого сводится к тому, как вы справляетесь с функциональностью. Вы можете использовать $.on() или какой-нибудь другой слушатель, но я не думаю, что это необходимо, если вы знаете, когда добавляете элемент, и он полностью находится под вашим контролем.

Например:

EDIT - Установленный имеющий click обработчик на строке, поместить его на элемент .rem вместо этого.

$(document).ready(function() { 
    var $row = $("<tr>"), 
     $col1 = $('<td>colex1</td>'), 
     $col2 = $('<td>colex2</td>'), 
     $col3 = $('<td>colex3</td>'), 
     $col4 = $('<td class="rem">colex4</td>'); 

    var addrow = function() { 
     $row.clone(true).prependTo("#mytable"); 
    }; 

    var removerow = function() { 
     var $button = $(this), 
      $row = $button.closest('tr'); 

     $row.fadeOut('slow'); 
    }; 

    $row.append($col1, $col2, $col3, $col4); 
    // This could be $($col4).click(removerow);, too. 
    $row.find('.rem').click(removerow); 

    $('#but').click(addrow); 
    $('.rem').click(removerow); 
}); 

http://jsfiddle.net/sM2R8/4/

Теперь это использует кэширование нового $row с $.clone(true) скопировать обработчик кликов, которые были добавлены. Если вы хотите изменить значения, вам нужно клонировать, а затем обновлять эти значения, но это всего лишь нюанс того, как вы хотите справиться с этим. Вы также можете добавить обработчик removerow к клонированному элементу до того, как вы добавите его в таблицу.