2

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.

luminol
  • 407
  • 4
  • 15
  • You don't actually seem to have a `
    ` tag anywhere. What's the submit button supposed to submit?
     – Strelok Jul 24 '15 at 00:26

2 Answers2

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.

jmar777
  • 38,796
  • 11
  • 66
  • 64
  • 1
    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. – freedomn-m Jul 24 '15 at 00:27
  • @freedomn-m Thanks for the expanded explanation. +1 – jmar777 Jul 24 '15 at 00:30
  • @jmar777 Thank you. This solved my main issue. Delegation and on() all the way! – luminol Jul 30 '15 at 14:03
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

Community
  • 1
  • 1
Datt
  • 851
  • 9
  • 21