javascript - 在 .on() 点击事件中附加后选择器不起作用

Question

使用我的 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 父行的 div 位于动态生成的 div 内。

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

编辑: 这是现在的最新代码，它完美地基于我想要的行为。 http://jsfiddle.net/fn51hrgv/4/

Answer 1

尝试这样的事情:

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