JQuery事件过早地在循环中发生

时间:2015-10-16 03:15:41

标签: javascript jquery ajax

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

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

任何人都可以看到为什么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));

1 个答案:

答案 0 :(得分:0)

Dim price as Double 似乎被调用,delete_email事件的名称未引用?

尝试将click替换为Function.prototype.bind()的调用,将delete_email作为参数传递

data.emails[i].id

&#13;
&#13;
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));
}
&#13;
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));
}
&#13;
&#13;
&#13;