Jquery button click() function is not working

Question

I am trying to create dynamic form where user can add dynamic text-fields based on their requirement. Here is my jquery code ..

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length +1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
        var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");

        var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(lname);
        fieldWrapper.append(removeButton);
        fieldWrapper.append(addButton);
        $(this).remove();
        $("#buildyourform").append(fieldWrapper);

    });

});

and Html code is ...

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
    <div class="fieldwrapper" name="field1" id="field1" />
       <input type="text" name="name" class="fieldname" id="tb1_1" />
       <input type="text" name="email" class="lastname" id="tb1_2" />
       <input type="button" value="+" class="add" id="add" />
    </div>
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" />

Check my JSFiddle also.

Whats wrong with me is when user click on "+" button first time then click function working and it adds two text-fields into my fieldset. But after that when i click on "+" button, its not triggering click function. May be id conflict. Please help.

`May be id conflict.` - Have you tried resolving the conflict yourself? — Jakub Konecki, Aug 12 '13 at 14:43
You're re-using the id "add" on your new buttons. Values for "id" attributes can only be used once on a page. *edit* oh wait, you remove the original button. Well that's the problem then :) — Pointy, Aug 12 '13 at 14:43
I had this same problem but my element was not dynamically generated, it was a plain ol' element on the page. I believe it was due to interference from Knockout.js. — Sean, Oct 17 '14 at 16:50

score 62 · Accepted Answer · answered Aug 12 '13 at 14:43

62

You need to use the event delegation syntax of .on() here. Change:

$("#add").click(function() {

to

$("#buildyourform").on('click', '#add', function () {

jsFiddle example

answered Aug 12 '13 at 14:43

j08691

204,283
31
260
272

I have one more problem, when i click on "+" button, its added two text-fields. Suppose I added 4 to 5 textfields and now i am trying to remove each fields using "-" button. When I reached to my second div element and click on "-" then it removes "+" button also from my first div element. Is there any way to add event on first "-" button so that after click on "-" it should add back "+" button into my first div element?? – Free-Minded Aug 12 '13 at 14:53
Wouldn't it be simpler to just move the + button so that it stayed in the same place and you weren't constantly moving it? – j08691 Aug 12 '13 at 14:55
@j08691 i don't want this – Free-Minded Aug 12 '13 at 14:57
Well then if I understand you correctly, you'd need to check when the last row was deleted, and then just add a new add button to what becomes the new last row. – j08691 Aug 12 '13 at 15:03
yes that exactly i want @j08691 – Free-Minded Aug 12 '13 at 15:19
Like this: http://jsfiddle.net/j08691/4QtB4/3/? – j08691 Aug 12 '13 at 15:28
Ya thanks, thats I want, but its not working at first level. Means when i click on + and then - its not adding + button to my first div element. – Free-Minded Aug 12 '13 at 15:51
1

Try this http://jsfiddle.net/j08691/4QtB4/4/ – j08691 Aug 12 '13 at 15:52
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/35296/discussion-between-shreshtt-bhatt-and-j08691) – Free-Minded Aug 12 '13 at 15:56
-1 you need to explain the difference between the two click syntax. Why do you use the .on instead of .click? I know why, but this is half an answer. – M H Jan 19 '17 at 16:06
@michaelhanon It says right there in the answer, "event delegation syntax". If you, or someone else, is unfamiliar with that term, they can easily Google it or look at the duplicate of this question. – j08691 Jan 19 '17 at 16:34
The user already googled, and found this on Stack. We can agree to disagree, but you and I both know, on stack, you're supposed to explain the answer. – M H Jan 19 '17 at 16:42
This helped me. Take my upvote – Omair Munir Feb 24 '23 at 18:09

Rory McCrossan · Answer 2 · 2022-01-08T13:32:09.770

You need to use a delegated event handler as the #add elements dynamically appended won't have the click event bound to them. Try this:

$("#buildyourform").on('click', "#add", function() {
    // your code...
});

Also, you can make your HTML strings easier to read by mixing line quotes:

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');

Or using string interpolation (ES6 feature, so this won't work in IE):

var fieldWrapper = $(`<div class="fieldwrapper" name="field${intId}" id="field${intId}"/>`);

Or even supplying the attributes as an object:

var fieldWrapper = $('<div></div>', { 
  class: 'fieldwrapper',
  name: 'field' + intId,
  id: 'field' + intId
});

score 3 · Answer 3 · answered Aug 12 '13 at 14:44

3

After making the id unique across the document ,You have to use event delegation

$("#container").on("click", "buttonid", function () {
  alert("Hi");
});

answered Aug 12 '13 at 14:44

Suresh Atta

120,458
37
198
307

score 1 · Answer 4 · answered Aug 12 '13 at 14:47

1

The click event is not bound to your new element, use a jQuery.on to handle the click.

answered Aug 12 '13 at 14:47

David MacCrimmon

966
1
6
19

Jquery button click() function is not working

4 Answers4

Linked