jQuery on() не удаляет элемент

Question

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

Проблема в том, что только первая строка, которая не создана динамически, является единственной, которая фактически работает, и она способна удалять себя.

Таким образом, страница даже перестает создавать новые строки из-за отсутствия начальной строки (но это еще одна проблема xD).

Это код, который я использую для удаления строки:

$('.remove').on("click",function(event){ 
    event.preventDefault; 
    $(this).parent().parent().remove(); 

    //alert(str); 
    newRowNum -= 1; 
}); 

и вот живой сайт, если вы хотите, нужно Чек это: http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/tabladinamica.php

Answer 1

.on() события только связаны с элементами которые первоначально находятся в DOM с синтаксисом по умолчанию. See the documentation for it. Вам нужно иметь второй селектор, если вы хотите делегировать событие другим элементам.

Answer 2

<table id="test"> 
     <tr> 
      <td>A</td> 
      <td><a>Click</a></td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td><a>Click</a></td> 
     </tr> 
    </table> 

    <p> 
     <a id="insert">Copy</a> 
    </p> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 

     $("#test").find("a").click(function(){ 

      $(this).parents("tr").remove(); 

     }); 

     $("#insert").click(function(){ 

      $("#test tr").first().clone(true).appendTo("#test"); 

     }); 

     }); 

    </script> 

Вот скрипка для вас:

http://jsfiddle.net/AdS8D/3/

EDIT: Добавлена ​​функциональность клона скрипки.

Answer 3

Вернитесь к использованию техники клонирования, но используйте .clone (true), чтобы он копировал обработчики событий.

Answer 4

Вы можете попробовать этот код:

$("#tabdata").on("click", ".remove", function(event){ 
    event.preventDefault; 
    $(this).parent().parent().remove(); 
    newRowNum -= 1; 
});