Question

我有一个包含样本表的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的新添加按钮

Answer 1

on事件的强大功能是第二个参数，否则它与点击处理程序相同。

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

上面的代码会检查文档中的点击事件，如果目标元素是#save，它将调用事件。

当你想到多个项目时总是使用类，在这种情况下不要使用ID。

Answer 2

问题是您需要委托DOM中的父级以供将来添加的元素使用。此外，您不应该重复ID的事实应该得到纠正。

.on函数可以委托给父元素，以便可以绑定未来添加的元素。下面on（）语句中的第二个参数允许我将click事件绑定到#samle_row并委托目标元素＆＃34; .save＆＃34;

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

Answer 3

使用以下

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

您甚至可以body替换#sample_row：）

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);
    }
);

.on事件无法处理新添加的按钮jquery

4 个答案: