.on事件不適用於新添加的按鈕jQuery

Question

我有一個包含一個TR的樣本表的div

<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的新添加按鈕上起作用？

Answer 1

on事件的功能是第二個參數，否則與單擊處理程序相同。

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

上面的代碼將檢查文檔中的click事件，如果目標元素是#save ，它將調用event。

當您想到多個項目時，請始終使用class，在這種情況下請不要使用ID。

Answer 2

問題是您需要在DOM中委派給父對象以供將來添加元素。 另外，您不應該復制ID的事實也應得到糾正。

.on函數可以委托給父元素，以便將來添加的元素可以綁定。 下面的on（）語句中的第二個參數允許我將click事件綁定到#samle_row並為目標元素“ .save”委派

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

Answer 3

使用以下

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

您甚至可以用#sample_row代替body ：）

Answer 4

嘗試這個

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