jQuery 在另一个事件监听器之前绑定(bind)事件监听器

Question

使用prettyPhoto插件来打开模态样式的内容容器，并尝试与 Google Analytics 的事件跟踪集成以跟踪视频何时打开。

问题是，当我

$('a.videoClickListener').click(function(event){
    console.log('here');
    _gaq.push(['_trackEvent', 'Product Page', 'Video Open', '<?php echo $product->getNameWithManufacturer(); ?>']);
});

该事件永远不会被触发，因为 PrettyPhoto 会阻止该事件继续(非常正确，否则如果单击超链接，页面将会更改)。

prettyPhoto 似乎没有提供“打开”回调函数，但如果提供了，我无论如何也无法使用它，因为 PrettyPhoto 监听器是在布局中的某个位置设置的(我们使用 rel="prettyPhoto" 每次我们想要使用 PrettyPhoto 时，并通过 URL 传递参数，这是 PrettyPhoto 推荐的做事方式)。我还想将产品详细信息传递给 Analytics，排除所有 PrettyPhoto 打开事件的全局视频打开监听器。

如何在 PrettyPhoto 监听器之前绑定(bind)监听器？如果事实证明我必须使用 .unbind()，然后绑定(bind)我的监听器，然后重新绑定(bind) PrettyPhoto，我如何取消绑定(bind)插件中指定的处理程序？

Answer 1

理想情况下，您可以在任何其他事件绑定(bind)之前添加您的事件绑定(bind)，以便它首先执行。

不幸的是，jQuery 似乎不包含任何此类功能。

但是，我编码了 preBind method ，这似乎可以解决问题:

$.fn.preBind = function(type, data, fn) {
  this.bind(type, data, fn);

  var currentBindings = this.data('events')[type];
  var currentBindingsLastIndex = currentBindings.length - 1;

  var newBindings = [];

  newBindings.push(currentBindings[currentBindingsLastIndex]);

  $.each(currentBindings, function (index) {
    if (index < currentBindingsLastIndex)
      newBindings.push(this);
  });

  this.data('events')[type] = newBindings;

  return this;
};

用法:

$('#button').bind('click', function() {
  console.log('world');
});

// 2nd apostrophe for the selector was missing
$('#button').preBind('click', function() {
  console.log('hello');
});

$('#button').click();

// Output:
//
// > "hello"
// > "world"