动态添加元素上的多个事件绑定

Question

I have the following javascript jquery ajax call that is inside a for loop.

This loop does a call to an external api and appends an input button to an html element. When this button is pressed it should show a popup alert box, but it popups multiple times as the for loop is attaching this click event to the button multiple times.

I also tried to put the .click() outside of the for loop, but that doesnt seem to work neither as the ajax is an async and the .click() event doesn't get attached to anything since its outside of the flow.

I tried to google this issue, but most people just have regular ajax async issues, but this time its in a loop and there doesnt seem to be much info on this setup.

• How would one fix or improve this code? I'm sure its not the most efficient setup.
• Do I have to use a callback function?

Code

function successHandler(data, textStatus, jqXHR) {        
   jj = '<input class ="submitAsset"type="submit" value="'+ data
+'">';
   jQuery("#example").append(jj); 

  jQuery('.submitAsset').on("click", function() {                     
    alert("clicked");
  }); //function click
} //function successHandler                                           
for (i=0;i < 9; i++)  {
     $.ajax({   
       dataType: 'json',   
       url: 'http://example.com',   
       success: successHandler 
     });//ajax call-- get required information

}//for

Answer 1

The reason it is throwing multiple alerts is because same click handler is attached to element every time successhandler is called.

You need to either use event delegation or attach the event in success event only to newly appended element:

1) Using event delegation:

function successHandler(data, textStatus, jqXHR) {
 jj = '<input class ="submitAsset"type="submit" value="'+ data +'">';
 jQuery("#example").append(jj);    
}
jQuery('#example').on("click",".submitAsset", function() {                     
  alert("clicked");
});

2) By adding click handler to last appended element:

function successHandler(data, textStatus, jqXHR) {        
 jj = '<input class ="submitAsset"type="submit" value="'+ data +'">';
 jQuery("#example").append(jj); 
 jQuery('.submitAsset:last').on("click", function() {                     
   alert("clicked");
  }); //function click
 } //function successHandler  

NOTE: I would recommend using event delegation in this case as it created less CPU overhead compared to multiple bindings.

Answer 2

You don't need to attach events in loop and attach events using event delegation

    function successHandler(data, textStatus, jqXHR) {        
         jj = '<input class ="submitAsset"type="submit" value="'+ data +'">';
         jQuery("#example").append(jj); 
    } //function successHandler                                           

   for (i=0;i < 9; i++) 
   {
         $.ajax({   
           dataType: 'json',   
           url: 'http://example.com',   
           success: successHandler 
         });//ajax call-- get required information

    }//for

   //and attache events using event delegation
   $("#example").on("click", "input.submitAsset", function() 
   {                     
        alert("clicked");
   }); 

Answer 3

The successHandler is being called multiple times and the event handler is registered multiple times with the class name. So all the elements created already will get registered multiple times.

To fix this, instead of registering the handler with jQuery('.submitAsset') , create the element jj by wrapping jQuery and register the onclick hander directly to the element as below,

function successHandler(data, textStatus, jqXHR) {        
   jj = jQuery('<input class ="submitAsset"type="submit" value="'+ data
+'">');
   jQuery("#example").append(jj); 

   jj.on("click", function() {                     
    alert("clicked");
  }); //function click
} //function successHandler                                           
for (i=0;i < 9; i++)  {
     $.ajax({   
       dataType: 'json',   
       url: 'http://example.com',   
       success: successHandler 
     });//ajax call-- get required information

}

Otherwise, attach the event outside of the success handler as below,

$("#example").on("click", ".submitAsset", function() 
   {                     
        alert("clicked");
   }); 

function successHandler(data, textStatus, jqXHR) {        
       jj = '<input class ="submitAsset"type="submit" value="'+ data
    +'">';
       jQuery("#example").append(jj); 


    } //function successHandler                                           
    for (i=0;i < 9; i++)  {
         $.ajax({   
           dataType: 'json',   
           url: 'http://example.com',   
           success: successHandler 
         });//ajax call-- get required information

    }

Answer 4

If tou have form then I don't think you need to add multiple Submit buttons instead you just add Button type otherwise you need to add return false or event.preventDefault() . So I suggest to use button type and use event delegation like,

function successHandler(data, textStatus, jqXHR) {
   // you are using json as dataType so you may need to get a key from data object
   jj = '<input class ="submitAsset" type="button" value="'+ data
+'">';
   jQuery("#example").append(jj); 
}

jQuery("#example").on("click", '.submitAsset',function() {                     
    alert("clicked");
}); //function click