jQuery无法从动态创建的字段获取输入值

Question

Receiving value from static field when keyup based on input field class(.inputclass) method, but once add field dynamically its not get the value.

Below the sample code, Please help.

 $(function(){ $(document).ready(function(){ $(".inputclass").keyup(function() { alert($(this).val()); }); }); }); 

 <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <form> <table width="250" border="0" cellspacing="0" cellpadding="0" id="dataTable"> <tr> <td>Field 1</td> <td><input type="text" class="inputclass" /></td> </tr> <script> var counter =1; $(function(){ $('#addNew').click(function(){ counter += 1; $('#dataTable').append('<tr><td>Field ' + counter + '</td><td><input type="text" class="inputclass"/></td></tr>'); }); }); </script> </table><br/> <input type="button" id="addNew" value=" &plusmn; Add New Field"/> </form> 

Answer 1

This is because when you assigned the event handler, it only assigned to the existing elements at the time.

Delegate to the document :

$(document).on('keyup', '.inputclass', function(){
   alert($(this).val())
});

When you delegate to a parent or the document, you are using the event that bubbles up and so it doesn't matter if there are dynamic elements.

Answer 2

 $(function(){ $(document).ready(function(){ $(document).on('keyup', '.inputclass', function(){ alert($(this).val()); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <form> <table width="250" border="0" cellspacing="0" cellpadding="0" id="dataTable"> <tr> <td>Field 1</td> <td><input type="text" class="inputclass" /></td> </tr> <script> var counter =1; $(function(){ $('#addNew').click(function(){ counter += 1; $('#dataTable').append('<tr><td>Field ' + counter + '</td><td><input type="text" class="inputclass"/></td></tr>'); }); }); </script> </table><br/> <input type="button" id="addNew" value=" &plusmn; Add New Field"/> </form>