jQuery 绑定(bind)解除绑定(bind)点击事件

Question

我正在尝试使用 jQuery 来计算 ID 被点击的次数。例如，如果单击 #kwick_1 一次，我希望它加载视频“否则”不执行任何操作。

我正在考虑在整个函数中应用这一点，因此 2、3、4 等也是如此。

我如何实现这一目标？

var timesClicked = 0;
  $('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').bind('click', function(event){
   var video = $(this).find('a').attr('href'); /* bunny.mp4 */

   var clickedID = $(this).attr('id'); /* kwick_1 */
   var vid = 'vid';
   timesClicked++;

   $(this).removeAttr('id').removeAttr('class').attr('id',clickedID + vid).attr('class',clickedID + vid);
   if(timesClicked == 1) {

    $.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){
     $('.'+clickedID+vid).html(data);
    }); 

   } else {
    /* Do nothing for now */
   }
   return false;
  });

Answer 1

您可以使用.one()更容易做到这一点，如下所示:

$('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').one('click', function(event){
  var video = $(this).find('a').attr('href'), clicked = this.id + 'vid';

  $(this).attr({ id: clicked, 'class': clicked });
  $.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){
    $('.'+clicked).html(data);
  }); 
}).click(function() { return false; });

剩下的只是优化和减少重复代码，但想法是使用 .one() 绑定(bind)您只想发生一次的部分。 ，那么该处理程序将在第一次执行后自行删除。然后我们使用 .click() 绑定(bind) return false因为这种情况应该总是发生。确保像上面的示例一样在之后绑定(bind)，因为事件处理程序按照它们绑定(bind)的顺序运行。

如果你可以给它们全部一个类，你也可以用 .kwick 替换你的 #kwick_1, #kwick_2.... 选择器，上面的仍然有效，更容易维护。