CODEWITHSUNDEEP
javascriptjqueryhtml
Bhoopalan R
Bhoopalan R

Reputation: 9

JQuery can't get input value from dynamically created field

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>

Upvotes: 1

Views: 1777

Answers (2)

SilverSurfer
SilverSurfer

Reputation: 4368

$(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>

Upvotes: 0

MrCode
MrCode

Reputation: 64526

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.

Upvotes: 7

Related Questions