Question

我有图像。当点击图像时，我会用一些动画显示数据。所以我要做的是禁用图像到浏览器中显示的数据。然后一旦加载数据，我需要启用图像。 / p>

例如

$("#imageid").click(function(e){
//disable the click
$("idforanim").animate({left : "-=50 "px"},500,function(){callfunction1();})
 })

callfunction1(){
//show the data
//enable the click
}

我怎样才能做到这一点？

Answer 1

另一种方法是设置一个标志，指示数据仍在处理中，并在完成时取消设置标志：

var processing = false;

$("#imageid").click(function(e){
    if ( !processing )
    {
        //disable the click
        processing = true;
        $("idforanim").animate({left : "-=50px"},500,function(){callfunction1();})
    }
})

callfunction1(){
   //show the data
   //enable the click
   processing = false;
}

Answer 2

你可以利用animate在完成动画时调用函数的事实来做到这一点。例如：

http://jsbin.com/adokiz/2

我们做的是：

$(document).ready(function() {
    var running = false;
    $('img').on('click', function(event) {
      if (running) return;

      running = true;
      console.log(this);
      $(this).animate({top: '400px'}, function() {
        $(this).css({top: 0});
        running = false;
      });
    });
});

使用名为running的全局变量，您可以防止同时识别多次点击。这与您的代码不完全相同，但您可以轻松地对其进行调整。

另一种方法是使用jQuery one来绑定它，因此应该更加难以执行两次：

$(document).ready(function() {  
  var animation;

  var binding = function() {
    $('img').one('click', animation);
  };

  animation = function(event) {
    $(event.target).animate({top: '400px'}, function() {
      $(event.target).css({top: 0});
      binding();
    });
  };

  binding();
});

演示：http://jsbin.com/adokiz/3

Answer 3

使用unbind方法：

var clickHandle = function(){
    $(this).unbind('click', clickHandle);
    callfunc();
};
var callfunc = function(){
    // do your stuff
    $('#imageid').click(clickHandle);// reinstall click handle
};
$('#imageid').click(clickHandle);

使用Jquery启用和禁用图像的click事件？

3 个答案: