jQuery cannot recognize appended cloned elements using jQuery.appendTo()

Question

I want to make a list of group inputs allow user to dynamically let user add/remove group row:

        
                      

              相关标签:
       
      

Answer 1

Add 'true' to the clone method in order to copy the data as well as the events attached to the original element.

rowTemplate = j('.form-denomination:first-child').clone(true);

This is disabled by default. Here is the clone documentation: https://api.jquery.com/clone/

P.s. You don't need the click function within the document.ready and it won't bind until after the click.

Answer 2

jQuery 1.7+

j(".form-denomination").on("click", ".delete-denomination", function(){
    j(this).parent().remove(); 
});

jQuery 1.3+

j(".delete-denomination").live("click", function(){ 
    j(this).parent().remove(); 
 });               

jQuery 1.4.3+

j(".form-denomination").delegate(".delete-denomination", "click", function(){ 
   j(this).parent().remove(); 
}); 

Answer 3

The problem is a matter of order and when expressions are evaluated. When you call jQuery with a selector, the selector is evaluated at that time to select the matching elements which exist at that time. The click handler is then registered to only those elements. Elements which are created later are, naturally, not affected.

One solution, demonstrated in another example, uses jQuery's "live events" to apply the selector at the time each event is fired to determine what elements, if any, it would match. There is a performance implication to this approach.

Another solution is to register the desired event handler on the newly created elements when you create them.