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>