在.on（）点击事件中追加后选择器不起作用[重复]答案

【问题标题】：selector not working after append inside the .on() click event [duplicate]在.on（）点击事件中追加后选择器不起作用[重复]
【发布时间】：2014-10-05 10:03:53
【问题描述】：

使用我的 jquery 函数动态生成的类选择器不起作用。

这是我的 jquery：

$(".add-category").on("click",function () {
        // var id = $('#row-panel #col-panel').length.toString();
        var id2 = ($('#parent-row #child-row').length + 1).toString();

        $('#parent-row').append('<div class="row p-10" id="child-row">\
                                    <div class="col-lg-12">\
                                      <div class="panel panel-default panel-grey">\
                                        <div class="panel-body">\
                                          <div class="row p-10">\
                                            <div class="col-lg-4" >\
                                             <label>Category Name</label>\
                                            </div>\
                                            <div class="col-lg-8">\
                                              <input type="text" class="form-control" id="website-url">\
                                            </div>\
                                          </div>\
                                          <div class="row p-10">\
                                            <div class="col-lg-4" >\
                                             <label>Category URL</label>\
                                            </div>\
                                            <div class="col-lg-8">\
                                              <input type="text" class="form-control" id="website-url">\
                                            </div>\
                                          </div>\
                                        </div>\
                                      </div>\
                                    </div>\
                                  </div>\
                        ');
                    });

    $(".remove-category").on("click",function () {
        if ($('#parent-row #child-row').length == 1) {
            alert("You cannot remove the last form!");
            return false;
        }
        $("#parent-row #child-row:last-child").remove();
    });

这是标记

<div class="panel-body" id="parent-row">
                                  <div class="row p-10">
                                    <div class="col-lg-4">
                                      <label>1 Category</label>
                                    </div>
                                    <div class="col-lg-8">
                                      <input type="text" class="form-control">
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-lg-offset-6 col-lg-4">
                                      <label>Add Sub Panel</label>
                                    </div>
                                    <div class="col-lg-2">
                                      <a href="#" id="add-category" class="add-category">
                                        <i class="fa fa-plus"></i>
                                      </a>&nbsp;&nbsp;&nbsp;
                                      <a href="#" id="remove-category" class="remove-category">
                                        <i class="fa fa-times"></i>
                                      </a>
                                    </div>
                                  </div>
                                  <div class="row p-10" id="child-row">
                                    <div class="col-lg-12">
                                      <div class="panel panel-default panel-grey">
                                        <div class="panel-body">
                                          <div class="row p-10">
                                            <div class="col-lg-4" >
                                             <label>Category Name</label>
                                            </div>
                                            <div class="col-lg-8">
                                              <input type="text" class="form-control" id="website-url">
                                            </div>
                                          </div>
                                          <div class="row p-10">
                                            <div class="col-lg-4" >
                                             <label>Category URL</label>
                                            </div>
                                            <div class="col-lg-8">
                                              <input type="text" class="form-control" id="website-url">
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

具有 id parent-row 的 div 位于动态生成的动态 div 中。

这里是 jsfiddle：http://jsfiddle.net/fn51hrgv/2/

编辑：这是现在最新的代码，它可以根据我想要的行为完美运行。 http://jsfiddle.net/fn51hrgv/4/

【问题讨论】：

注意： ID 必须是唯一的，看起来您需要 event-delegation 来动态创建元素。
谢谢你，但我的问题是 jquery 无法检测到类选择器。我知道类选择器不需要是唯一的。但我可能错了..
@ChristianBurgos：哪个选择器不起作用？它以什么方式不起作用？如果您在绑定处理程序后向 DOM 添加元素，那么您必须重新绑定处理程序或委托事件。我在这里有一篇关于事件委托的博文：publicvoidlife.blogspot.com/2014/03/…
修复代码以使用 .on 后，您需要重新审视如何管理将子面板添加到哪个“类别”。 This jsFiddle 显示不正确的行为。
@DaveSalomon，是的，当然，我目前正在修复该行为。我被卡住了，因为在没有授权的情况下错误地使用了 .() 函数。

标签： javascript jquery html

【解决方案1】：

试试这样的：

 $(".panel-body").on("click", ".remove-category",function () {

【讨论】：

谢谢你！这拯救了我的理智！