javascript - selector not working after append inside the .on() click event

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('
\
                                    
\
                                      
\
                                        
\
                                          
\
                                            
\
                                             Category Name\
                                            
\
                                            
\

                                              \
                                            
\
                                          
\
                                          
\
                                            
\
                                             Category URL\
                                            
\
                                            
\
                                              \
                                            
\

                                          
\
                                        
\
                                      
\
                                    
\
                                  
\
                        ');
                    });

    $(".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

                                  

                                    

                                      1 Category
                                    
                                    

                                      
                                    
                                  
                                  

                                    


                                      Add Sub Panel
                                    
                                    

                                      
                                        
                                         
                                      
                                        
                                      
                                    

                                  
                                  

                                    

                                      

                                        

                                          

                                            

                                             Category Name
                                            
                                            


                                              
                                            
                                          
                                          

                                            

                                             Category URL
                                            
                                            

                                              
                                            

                                          
                                        
                                      
                                    
                                  
                                

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/

Answer

try something like this:

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