title: Multiple event binding on dynamically added elements
body: <p>I have the following javascript jquery ajax call that is inside a for loop. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <ul>
  <li>How would one fix or improve this code? I'm sure its not the most efficient setup. </li>
  <li>Do I have to use a callback function? </li>
  </ul>
  
  <p>Code</p>
  
  <pre><code>function successHandler(data, textStatus, jqXHR) {        
     jj = '&lt;input class ="submitAsset"type="submit" value="'+ data
  +'"&gt;';
     jQuery("#example").append(jj); 
  
    jQuery('.submitAsset').on("click", function() {                     
      alert("clicked");
    }); //function click
  } //function successHandler                                           
  for (i=0;i &lt; 9; i++)  {
       $.ajax({   
         dataType: 'json',   
         url: 'http://example.com',   
         success: successHandler 
       });//ajax call-- get required information
  
  }//for
  </code></pre>