在.on()单击事件中append之后选择器不工作

用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/