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.

Answer 1

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.

Answer 2

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