jQuery .load() 回调函数多次触发答案

【问题标题】：jQuery .load() callback function fires multiple timesjQuery .load() 回调函数多次触发
【发布时间】：2010-08-16 05:54:58
【问题描述】：

第一次执行代码时，它会正确生成：
加载完成

但它第二次产生：
加载完成
加载完成

第三次生产：
加载完成
加载完成
加载完成

等等...所以第 20 次加载函数完成回调函数会被触发 20 次。

$('#image-tag').load(function () {
        console.log("load complete");
    });
}).attr('src', 'image.jpg').appendTo('#main');

知道是什么导致回调函数像这样重复/增加吗？

【问题讨论】：

【解决方案1】：

就像您在点击处理程序或其他东西中调用它一样，这每次都会绑定一个 new .load() 处理程序。要么绑定一次.load()，要么使用.one()，像这样：

$('#image-tag').one('load', function () {
    console.log("load complete");
});

【讨论】：

【解决方案2】：

这是因为您每次运行该代码时都会添加另一个事件处理程序。

如果您想将图像标签附加到元素中，则不应使用页面中已经存在的图像。而是创建一个新的图像标签：

$('<img/>').load(function () {
  console.log("load complete");
}).attr('src', 'image.jpg').appendTo('#main');

【讨论】：

非常感谢。我一直错过这样一个事实，即在循环中将某些内容绑定到元素会导致第二次执行出现问题。 $(#img).unbind('load').load(function(){...});