JQuery事件在循环中过早触发

JQuery Event Firing Prematurely In Loop

本文关键字：事件 循环 JQuery      更新时间：2023-09-26

我有一个有多个输入的表单。我在顶部有一个下拉列表的记录id。当有人选择一个记录ID时，将触发一个ajax请求，并返回该记录的属性。然后用所述属性动态地填充表单。返回的属性之一是电子邮件数组。我不知道有多少会被退回。

我有一个循环在我的.done ajax响应。我想在每个返回的电子邮件上创建一个事件处理程序，这将允许用户从表单中删除电子邮件。我的问题是，当ajax响应加载到DOM中时，即使事件是on click事件，也会触发事件。

有没有人看到为什么delete_email功能是在加载而不是点击射击?

请看下面的代码:

 ...
$form_post.done(function(data) {
   $('#button').button('reset');
   //success information here
   data = JSON.parse(data);
  for(var i = 0; i < data.emails.length; i++){
       $('#li_' + data.emails[i].id).on('click','#icon_' + data.emails[i].id,delete_email(data.emails[i].id));
  }
});
function delete_email($id){
    alert('hit');
    $('#li_' + $id).hide();
    $('#hidden_' + $id).val('');
}

我尝试了以下操作，它仍然触发.post事件。

for(var i = 0; i < data.emails.length; i++){
   (function (i) {
    $('#li_' + data.emails[i].id).on('click', '#icon_' + data.emails[i].id, delete_email(data.emails[i].id));
   }(i));
}

ANSWER -这是最终工作的。感谢@Tushar帮我解决了这个问题。

(function (i) {
    $('#li_' + data.emails[i].id).on('click', '#icon_' + data.emails[i].id, function () {
         delete_email(data.emails[i].id);
     });
}(i));

delete_email似乎在click事件中被调用，而不是通过名称引用?

尝试用Function.prototype.bind()代替delete_email的调用，传递data.emails[i].id作为参数

for(var i = 0; i < data.emails.length; i++){
   (function (i) {
     $('#li_' + data.emails[i].id)
    .on('click', '#icon_' + data.emails[i].id
      , delete_email.bind(null, data.emails[i].id)
    );
   }(i));
}


function delete_email($id){
    console.log($id)
}
var arr = ["a", "b", "c"];
for(var i = 0; i < arr.length; i++){
   (function (i) {
     $("<div />", {text: i})
    .on("click", delete_email.bind(null, arr[i])
    ).appendTo("body");
   }(i));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

相关文章：