jQuery click事件不适用于动态创建的表单字段

Question

我正在使用表格行创建动态输入字段

 var i = 1; $('#add').click(function(){ i++; $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" id ="lable" name="lable" ></tr>'); }); $('#lable').click(function(){ alert('called'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" id="dynamic_field"> <td colspan="2"> <button type="button" name="add" id="add" class="btn btn-success">Add Lable</button> </td> </table> 

但它不叫警报

Answer 1

因为您创建了动态输入，所以您应该使用事件委派 。 这意味着使用

$(document).on("click", '#lable', function(){

代替

$('#lable').click(function(){

请注意，html中不能包含重复的id属性。 所以请改用class（ .lable ）。

 var i = 1 $('#add').click(function(){ i++; $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" class="lable" name="lable"></tr>'); }); $(document).on("click", '.lable', function(){ alert('called'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" id="dynamic_field"> <tr> <td colspan="2"> <button type="button" name="add" id="add" class="btn btn-success">Add Lable</button> </td> </tr> </table>