javascript - Add input text field(using jquery) when last existing input is clicked -

javascript - Add input text field(using jquery) when last existing input is clicked -

this question has reply here:

event binding on dynamically created elements? 13 answers

i have form section deals text inputs named options.

by default i'm providing 2 options. want add together 1 more alternative field when lastly 1 clicked.

<input type='text' name='options[]' class='options'> <br/> <br/> <input type='text' name='options[]' class='options'>

i tried

$(".options:last").click(function(){ $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>"); })

it work first time. doesn't work after that. doesn't considers input added jquery. works when i'm clicking 2nd option. not lastly 1 added jquery. how that?

the click() method binds event handler matching elements exist in dom.

since new text boxes added dynamically afterwards, not have click handler. you either have bind click handler manually (which inefficient) or utilize event delegation binding event handler static parent element.

assuming #options static container element since you're appending it,

you can delegate event handler using .on() method follows

$('#options').on('click','.options:last',function(){ $(this).after("<br/><br/><input type='text' name='options[]' class='options'>"); })

javascript jquery forms text input