Добавление кнопки удаления с помощью функции jquery

Question

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

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('.deleteRowButton').click(DeleteRow); 
    }); 
    function DeleteRow(){ 
     $(this).closest('tr').remove(); 
    } 
    $(function() { 
     //$("#addRow").click(function() 
     $(document).on("click", "#addRow", function(){ 
      $('#container tr:last').after('<tr>\n\ 
      <td><select name="materialID[]" ><option value="0">Select A Material</option><?php echo str_replace("'", "\\'", $options); ?></select></td>\n\ 
      <td>Quantity: <input type="text" name="qty[]" /></td>\n\ 
      <td><select name="SupplierID[]" ><option value="0">Select A Supplier</option><?php echo str_replace("'", "\\'", $options2); ?></select></td>\n\ 
      <td><button class="deleteRowButton" type="button">Remove</button></td>\n\n\ 
     </tr>'); 
     }); 
    }); 

</script> 

Answer 1

Как вы добавляете ваш HTML динамически, то событие не будет в добавленной кнопке, потому что события были прикреплены в кнопках, которые были на странице, когда документ был готов, и не будет прикрепляться к новым кнопкам.

Попробуйте вместо этого:

$(document).ready(function() { 
    $(document).on('click', '.deleteRowButton', function() { 
     $(this).closest('tr').remove(); 
    } 
} 

Дайте ему попробовать и дайте мне знать, если это помогает!

Answer 2

Начальное назначение функции DeleteRow с помощью jQuery выполняется против всего на странице в то время. Когда вы добавляете новую строку, присваивание не добавляется к этому конкретному (новому) элементу, как никогда ранее.

Чтобы заставить его работать, вам нужно будет добавить событие on-click или повторно запустить jQuery, чтобы добавить событие в классы .deleteRowButton, чтобы все его новые.