jQuery .load（）回调函数多次触发

Question

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

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

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

等...所以第20次加载功能完成后，回调函数被触发20次。

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

是什么导致回调功能重复/增加这样的？

Answer 1

它就像你在一个单击处理程序或其他东西中调用它，这每次绑定一个新的 .load()处理程序。 绑定.load()一次，或使用.one() ，如下所示：

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

Answer 2

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

如果要将图像标记附加到元素中，则不应使用页面中已有的图像。 改为创建一个新的图片代码：

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