Question

我在确定执行以下操作的正确方法时遇到问题：当单击按钮“add_skill”时，向我的div添加新表单，禁用按钮以向我的div添加新表单。然后当用户点击新表单中的新按钮'button123'时，表单将通过AJAX提交数据，然后删除表单，并重新启用按钮'add_skill'，以便可以添加另一个表单。

到目前为止，我已经能够将表单添加到div的底部。但是，当我单击新窗体中的“button123”按钮时，jQuery似乎无法识别它，并且没有完成jQuery操作。

我是否以正确的方式解决这个问题？我实际上是在尝试制作一些东西，这样你就可以通过点击“+”按钮一个接一个地将新数据添加到div的底部。考虑将项目一个接一个地添加到简历中。这就是我的想法。

这是我的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)
           }
      );
});

这是我的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>

任何提示将不胜感激。提前谢谢。

Answer 1

这是event delegation的一个很好的用例：

变化：

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

...为：

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

另请注意，选择器应为.button123，其中包含＆＃39;。＆＃39;在前面。

Answer 2

扩展@ jmar777的答案而不是$(document).on('click', '.button123', <handler>);可以使用$(parent).on('click', '.button123', <handler>);其中parent是按钮123的父元素，它存在于DOM中，因为事件不是＆＃ 39; t需要泡到document。 event bubbling explained here

在使用jQuery创建的元素上使用jQuery

2 个答案: