2

class selectors that are produced on the fly with my jquery functions are not working.

here is my 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();
    });

and here is the mark-up

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

the div that has an id parent-row is inside a dynamic div that is produced on the fly.

here is the jsfiddle: http://jsfiddle.net/fn51hrgv/2/

EDIT: here is the latest code now and its working perfectly based on the behavior that i want it to be. http://jsfiddle.net/fn51hrgv/4/

Christian Burgos
  • 1,572
  • 9
  • 26
  • 48
  • **Note:** IDs must be unique, and it looks like you need [event-delegation](http://learn.jquery.com/events/event-delegation/) for the dynamically created elements. – Anton Aug 12 '14 at 11:01
  • thank you for that but my problem is jquery cannot detect the class selector.. i know that class selector do not need to be unique. but i might be wrong.. – Christian Burgos Aug 12 '14 at 11:02
  • 1
    @ChristianBurgos: What selector isn't working? In what way is it not working? If you're adding elements to the DOM after binding handlers then you'd have to either re-bind the handlers or delegate the events. I have a blog post about event delegation here: http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html – David Aug 12 '14 at 11:05
  • 1
    After fixing your code to use .on, you'll need to revisit how you're managing which 'category' to add the sub-panels to. [This jsFiddle](http://jsfiddle.net/daveSalomon/fn51hrgv/3/) shows the incorrect behaviour. – Dave Salomon Aug 12 '14 at 11:11
  • @DaveSalomon, yes of course, im currently fixing the behavior. i was stucked because of the incorrect usage of the .() function without delegation. – Christian Burgos Aug 12 '14 at 11:14
  • @DaveSalomon here is the latest code i've fixed... thanks guys! http://jsfiddle.net/fn51hrgv/4/ – Christian Burgos Aug 13 '14 at 03:27

1 Answers1

2

try something like this: 

 $(".panel-body").on("click", ".remove-category",function () {
reyaner
  • 2,799
  • 1
  • 12
  • 17