Jquery button click() function is not working [duplicate]

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
– Jakub Konecki, Commented Aug 12, 2013 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
– Pointy, Commented Aug 12, 2013 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
– Sean, Commented Oct 17, 2014 at 16:50

j08691 · Accepted Answer · 2013-08-12 14:43:48Z

64

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, 2013 at 14:43

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Free-Minded Over a year ago

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??

j08691 Over a year ago

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?

Free-Minded Over a year ago

@j08691 i don't want this

j08691 Over a year ago

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 Over a year ago

Try this jsfiddle.net/j08691/4QtB4/4

|

Rory McCrossan · Accepted Answer · 2022-01-08 13:32:09Z

20

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
});

edited Jan 8, 2022 at 13:32

answered Aug 12, 2013 at 14:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-08-12 14:44:34Z

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, 2013 at 14:44

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

David MacCrimmon · Accepted Answer · 2013-08-12 14:47:03Z

1

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

answered Aug 12, 2013 at 14:47

David MacCrimmon

9661 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery button click() function is not working [duplicate]

4 Answers 4

13 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

Comments

Comments

Comments

Linked

Related