Ajax在click事件中递增次数

Question

想加载一个图片在img地址,然后弹出结果,后来发现使用load()会随着点击次数递增,用off().on()也不能解决,望各位指教!

 $('#div1').off('click').on('click', function () {

        $('#img1').attr('src', '1.jpg');

        $('#img1').load(function () {

            $('#div1').css('width', $('#img1').width() + 100);

            alert($('#img1').width());
        })
    })

Answer 1

这load也是个事件啊，和你的click一样的，你也得解绑再绑定才只会有一次

Answer 2

 function imgload (){
 $('#img1').load(function () {

            $('#div1').css('width', $('#img1').width() + 100);

            alert($('#img1').width());
        })
}

$('#div1').off('click').on('click', function () {

        $('#img1').attr('src', '1.jpg');

        imgload ()
    })

你试试这样？

Answer 3

    var isLoad = false;

    $('#div1').on('click', function () {
        if (isLoad) return;
        isLoad = true;
        $('#img1').attr('src', 'https://tpc.googlesyndication.com/daca_images/simgad/5197609537319162116?w=400&h=209');
    });

    $('#img1').on('load', function () {
        isLoad = false;
        $('#div1').html( $('#img1').width() );
    });

或者加个中间变量控制一下呢？