Question

I have some input text fields that are being generated on the fly (via javascript) by the user. I want those fields to accept integers only so I am using the alphanumeric plugin. The plugin works as expected on elements that already exist when the page loads but it does not work with the new on-the-fly elements. How can I live-bind the new elements to this plugin? Thanks!

Here is some sample code.

http://jsfiddle.net/ctown4life/tZPg4/780/

Answer 1

Simple quick fix – change:

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);

to

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').numeric().appendTo(scntDiv);

Please notice that the dynamically inserted fields are all getting the same id. That’s not good, you should either use a unique id for each input, or no id at all.