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

Question

I have a form section that deals with text inputs named options.

By default i'm providing two options. I want to add one more option field when last one is 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 does work the first time. But doesn't work after that. It doesn't considers the input that were added by jquery. So it works only when i'm clicking the 2nd option. Not the last one added by jquery. How to do that?

T J · Accepted Answer · 2014-06-20T07:45:30.530

The click() method only binds the event handler to matching elements that currently exist in DOM.

Since new text boxes are added dynamically afterwards, they do not have a click handler. You you either have to bind the click handler manually (which is very inefficient) or use event delegation by binding the event handler to a static parent element.

Assuming #options is a static container element since you're appending to it,

You can delegate the event handler to it using .on() method as follows

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

Well, the other answers are better I suppose. – Nikhil Girraj Jun 20 '14 at 07:43 — Nikhil Girraj, Jun 20 '14 at 07:43

score 0 · Answer 2 · answered Jun 20 '14 at 07:30

You are appending the elements dynamically. It wont fetch last element after 1st append.

So Use event delegation for your code using .on() - Reference

You can delegate it using $(document) on $('#options'), if the #options element is static.

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

score 0 · Answer 3 · answered Jun 20 '14 at 07:30

0

You just need to bind click even using .on for dynamically added elements, like below :

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

answered Jun 20 '14 at 07:30

Bhushan Kawadkar

28,279
5
35
57

score 0 · Answer 4 · answered Jun 20 '14 at 07:42

You need to bind the function to the event again after adding the element.

Possible way of doing this would be

function AppendToEnd()
{
    $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>");
    $(".options:last").click(AppendToEnd()); // this will bind the function to the last element as before.
}

Also, you would need to bind the event initially yourself, so add

$(".options:last").click(AppendToEnd());

where your current code is.

score 0 · Answer 5 · answered Jun 20 '14 at 07:49

You would want to unbind click events for the other, previously added, inputs, as the user might want to edit them after they have been edited and that would cause unwanted option to be added.

Also you might want to consider wrapping the options in a div with some ID, as using id selectors is way faster than using class selectors. None that i stored the selected object on load and i dont need to call it later, i can just reuse the object I have already selected and save unnecessary computing time.

HTML

<div id="option-wrapper">
<input type='text' name='options[]' class='options' />
<br/>
<br/>
<input type='text' name='options[]' class='options' />
</div>

JS

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

JS fiddle: http://jsfiddle.net/JKurcik/HRg9M/

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

5 Answers5