Question

我在for循环中有以下javascript jquery ajax调用。

此循环调用外部api并将输入按钮附加到html元素。按下此按钮时，它应显示一个弹出警告框，但由于for循环将此单击事件多次附加到按钮，因此会弹出多次。

我还尝试将.click（）放在for循环之外，但这似乎既不起作用，因为ajax是异步的，而.click（）事件也没有附加到任何东西，因为它的外部流动。

我试图谷歌这个问题，但大多数人只是有定期的ajax异步问题，但这次它在一个循环中似乎没有太多关于此设置的信息。

如何修复或改进此代码？我敢肯定它不是最有效的设置。
我是否必须使用回调函数？

代码

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

它抛出多个警报的原因是每次调用successhandler时都会将相同的单击处理程序附加到元素。

您需要使用事件委派或仅在成功事件中将事件附加到新附加的元素：

1）使用事件委托：

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）通过将click处理程序添加到最后添加的元素：

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

注意：在这种情况下，我建议使用事件委托，因为与多个绑定相比，它创建的CPU开销更少。

Answer 2

您不需要在循环中附加事件并使用事件委派附加事件

    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

多次调用successHandler，并使用类名多次注册事件处理程序。因此，已创建的所有元素都将多次注册。

要解决此问题，请不要使用jQuery('.submitAsset')注册处理程序，而是通过包装jj创建元素jQuery并将onclick处理程序直接注册到元素，如下所示，

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

}

否则，请将event附加到成功处理程序之外，如下所示

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

如果有形式，那么我认为您不需要添加多个Submit buttons，而只需添加Button类型，否则您需要添加return false或{{1} }。所以我建议使用event.preventDefault()类型并使用事件委托，比如

button

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

4 个答案: