0

私のhtmlページに画像があり、ボタンをクリックすると、画像のsrcを変更する関数TestLoad（）を呼び出し、画像が読み込まれると何かを実行します...例：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"/>

私の問題は次のとおりです。ボタンを初めてクリックすると、アラートが1回「後に」表示され、もう一度クリックすると、アラートが2回、3回目は3回表示されます...

親切なアドバイスありがとう

4

3 に答える 3

2

ハンドラーが実行されるたびに、別の新しいロードハンドラーが追加されます。ハンドラーを割り当てる必要があるのは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');
    });
}
于 2012-12-21T16:05:40.613 に答える
1

onclickイベントは、おそらく別のloadイベントをバインドしています。

イベントを追加し続ける必要はありません。すでに存在しています。別のイベントをバインドする必要がある場合は、最初に前のイベントのバインドを解除する必要があります。

.on("load", function() { ... });
.off("load");
于 2012-12-21T16:05:12.037 に答える
0

イベントハンドラーで複数の関数をバインドしています

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

function TestLoad() {
    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');
}
于 2012-12-21T16:05:19.233 に答える