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

我在找出正确的方法来执行以下操作时遇到问题：在单击“添加技能”按钮时，向我的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)
           }
      );
});

//动态添加新技能表单
var i=0；
$（“.add_skill”）。单击（函数（）{
//技能和百分比的投入
变量技能=”\
技能：\
\
\
\
\
百分比：\
\
\
\
\
\
";
$（skill）.appendTo（“.skills”）；//将表单项添加到div的末尾
i++；//标识的增量
$（“.add_skill”）.prop（“disabled”，true）；//disabled（add form），一次仅1个
});
$（函数（）{
$（“按钮123”）。单击（函数（）
{
$（“.add_skill”）.prop（“disabled”，false）；//重新启用（添加表单）
}
);
});

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

技能

---

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

这是一个很好的用例：

更改：

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

$（“按钮123”）。单击（）

…致：

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

$（文档）.on（'click'，'.button123'，）；

---

另外，请注意选择器应该是

.button123

，前面有“.”。

扩展@jmar777的答案，而不是

$（文档）可以使用
$（父项）。在（'click'，'.button123'，）上
其中
parent
是DOM中存在的button123的父元素，因为事件在
文档
之前不需要冒泡
 实际上，您似乎在任何地方都没有
标记。“提交”按钮应该提交什么？若要添加说明，请添加当前的
$（“.button123”）。单击（）
可连接调用时存在的所有“button123”的事件。在此之后添加的任何新元素都不会自动附加事件。因此建议使用
$（document）
，将事件添加到确实存在的文档中。或者，您可以在附加html后附加事件处理程序，但委派可能更容易，更接近您预期的结果。@freedomn-m感谢您的详细解释+1@jmar777非常感谢。这解决了我的主要问题。代表团一路走来！