Блог

У меня есть div, который содержит пример таблицы с одним TR

 <div>
<table id="sample_row" style="width:300px">
<tr>
<td>
<select id="employer">
  <option value="1">Employer 1</option>
  <option value="2">Employer 2</option>
  <option value="3">Employer 3</option>
  <option value="4">Employer 4</option>
</select>
</td>
<td>
<select id="location">
  <option value="1">Location 1</option>
  <option value="2">Location 2</option>
  <option value="3">Location 3</option>
  <option value="4">Location 4</option>
</select>
 </td>
 <td><input type="text" name="fname" id="subArea"></td>
  <td>
<select id="employeeType">
  <option value="1">Part Time</option>
  <option value="2">Leased</option>
  <option value="3">Temporary</option>
  <option value="4">Full Time</option>
</select>
</td>
<td><input type="button" value="Save" id="save" class="save"></td>
<td><input type="button" value="Cancle" id="cancle"></td>
</tr>
</table>
</div>
  

Ниже приведена моя функция jQuery

 <script>
$( document ).ready(function() {

$("#save").on("click", function(){
     alert("##");
});
    $("#add").click(function(){
    var tr =$("#sample_row tr:first").clone();
    $('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);

});

});
</script>
  

Строка добавлена успешно, но .on событие не работает с новой добавленной кнопкой с tr?

Проблема в том, что вам нужно делегировать родительскому элементу в DOM для будущих добавленных элементов. Также следует исправить тот факт, что вы не должны дублировать идентификаторы.

Функция .on может делегировать родительским элементам, чтобы будущие добавленные элементы могли быть привязаны. Второй параметр в инструкции on() ниже позволяет мне привязать событие щелчка к #samle_row и делегировать целевой элемент «.save»

 $("#sample_row").on("click",".save",function(){
     alert("##");
});
  

Мощность on события — это второй параметр, в противном случае он такой же, как обработчик щелчков.

 $(document).on("click", ".save", function(){
     alert("##");
});
  

Приведенный выше код проверит событие щелчка внутри документа, и если целевой элемент является #save , он вызовет событие.

Всегда используйте class, когда вы думаете о нескольких элементах, не используйте ID в этом случае.

Используйте следующее

 $("body").on("click", ".save", function(){
     alert("##");
});
  

Вы даже можете заменить body на #sample_row 🙂

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

 $('body')
    .on('click', '.save', function (event) {
        alert("##");
    })
    .on('click', '#add', function (event) {
       var tr =$("#sample_row tr:first").clone();
        $('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);
    }
);