Using jQuery on an element created with jQuery

Question

I am having a problem figuring out the correct way to do the following: Add a new form to my div when a button, 'add_skill', is clicked, disable the button to add a new form to my div,. Then when the person clicks the new button within the new form, 'button123', the form would submit the data through AJAX, and then remove the form, and re-enable the button, 'add_skill' so that another form could be added.

So far, I've been able to add the form to the bottom of the div. But when I click the 'button123' button in the new form, jQuery doesn't seem to recognize it, and no jQuery actions are done.

Am I even going about this the right way? I'm essentially trying to make something so you can keep adding new data to a bottom of a div, one after another, by clicking a '+' button. Think of adding items to a resume, one after another. That's is what I have in mind.

Here's my JS.

//dynamic add new skill form
    var i = 0;
    $(".add_skill").click(function(){
         //inputs for Skill and Percentage
          var skill = "<div class='new_skill_input' id='num" + i + "'> \
            <label class='control-label'>Skill:</label> \
            <input type='text' placeholder='SFML' class='ctrl-textbox'> \
            <input type='hidden' class='hiddenObligatoire' value='false'> \
          </div> \
            <div class='new_skill_input'> \
            <label class='control-label'>Percentage:</label> \
            <input type='text' placeholder='85' class='ctrl-textbox'> \
            <input type='hidden' class='hiddenObligatoire' value='false'> \
          </div>\
          <div class='new_skill_input'>\
          <input  class='button123' type='submit' value='Add'>\
          </div>";

    $(skill).appendTo(".skills"); //add form items to end of div
    i++; //increment for identity
    $(".add_skill").prop("disabled", true); //disable (add form), only 1 at a time

});

$(function() {
      $("button123").click( function()
           {
             $(".add_skill").prop("disabled", false); //re-enable (add form)
           }
      );
});

And here is my HTML:

<div class="timeline-panel skills">
    <h1>Skills</h1>
    <div class="hr-left"></div>

    <!--Add new skill start-->
    <div class="new_skill">
        <input class="btn add_skill" style="font-family:Helvetica" style="float:left;" type="submit" value="+">
    </div>
    <!--add new skill end-->
</div>

Any tips would be greatly appreciated. Thank you in advance.

You don't actually seem to have a <form> tag anywhere. What's the submit button supposed to submit? — Strelok
– Strelok, Commented Jul 24, 2015 at 0:26

jmar777 · Accepted Answer · 2015-07-24 00:24:16Z

4

This is a great use-case for event delegation:

Change:

$("button123").click(<handler>)

...to:

$(document).on('click', '.button123', <handler>);

Also, note that the selector should be .button123 with the '.' in front.

answered Jul 24, 2015 at 0:24

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

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

3 Comments

fdomn-m Over a year ago

To add an explanation, your current $(".button123").click() wires up events for all 'button123' that exist at the time the call is made. Any new elements added after this do not have the event attached automatically. Hence the suggestion to use $(document).. which adds the event to document which does exist. Alternatively, you could attach event handlers after appending the html, but the delegation is probably easier and closer to what you are expecting to happen.

jmar777 Over a year ago

@freedomn-m Thanks for the expanded explanation. +1

luminol Over a year ago

@jmar777 Thank you. This solved my main issue. Delegation and on() all the way!

Community · Accepted Answer · 2017-05-23 10:31:23Z

0

extending @jmar777's answer instead of $(document).on('click', '.button123', <handler>); one can use $(parent).on('click', '.button123', <handler>); where parent is button123's parent element which is present in DOM, as event doesn't need to bubble till document. event bubbling explained here

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jul 24, 2015 at 0:56

Datt

89110 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using jQuery on an element created with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related