Question

在我的html页面中，我有一个图像，点击一个按钮，我正在调用函数TestLoad（），它正在改变图像的src，当图像加载时，我正在做某事...... 。举个例子：的javascript：

function TestLoad() {

    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');

     $('#ImgTest').load(function () {
         alert('after');
     });
}

HTML：

 <img id = "ImgTest" alt="" src="" style="width:100px; height:100px"/> 

 <input type="button" onclick ="TestLoad();" value="TestLoad"/>

我的问题是：当我第一次点击按钮时，我会在“之后”一次收到警报，如果我再点击一次，警报将显示两次，第三次显示3次......

请咨询感谢

Answer 1

每次处理程序执行时，它都会添加另一个新的加载处理程序。您只需要一次分配处理程序。如果您真的需要这样做，您可以先删除现有的处理程序，也可以检查事件是否已被处理：

var $imgTest = $('#ImgTest');

$imgTest.attr('src','Images/Image1.jpg');
$imgTest.unbind('load');
$imgTest.load(function(){
    alert('after');
});

或者：

var events;
var $imgTest = $('#ImgTest');

$imgTest.attr('src', 'Images/Image1.jpg');
events = $imgTest.data('events');
if(events !== null && typeof events.load === undefined){
    $imgTest.load(function(){
        alert('after');
    });
}

Answer 2

您的onclick事件可能绑定了另一个加载事件。

您无需继续向其添加活动。它已经存在。如果你需要绑定另一个，你需要先取消绑定上一个事件。

.on("load", function() { ... });
.off("load");

Answer 3

您正在事件处理程序中绑定多个函数

//bind this outside of your test load method
$('#ImgTest').load(function () {
    alert('after');
});

function TestLoad() {
    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');
}

load（）方法多次输入（执行）

3 个答案: