jQuery将事件侦听器绑定到另一个之前

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似乎没有提供'open'回调函数，但如果它确实无法使用它，因为prettyPhoto监听器是在布局中的某处设置的（我们每次使用rel="prettyPhoto"时都要使用它prettyPhoto，并通过URL传递参数，这是漂亮的照片推荐的做事方式）。我还想将产品详情传递给Google Analytics，排除所有prettyPhoto开幕活动中的全球视频开放侦听器。

如何在prettyPhoto侦听器之前绑定我的听众之前？如果事实证明我必须使用.unbind()，然后绑定我的侦听器，然后重新绑定prettyPhoto，我如何解除在插件中指定的处理程序？

Answer 1

理想情况下，您可以在之前添加您的事件绑定，以便它首先执行。

不幸的是，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" 

Answer 2

如果您使用unbind（），则即使插件所做的绑定也将被解除绑定。

Answer 3

我使用的是乔纳森的prebind方法，稍作修改，它也很好的诀窍。

​​

Answer 4

后来换一行在上面的代码，使其工作：

var currentBindings = $this.data('events',type); // var currentBindings = $this.data('events')[type]; 

这可能是因为我使用jQuery 2.0.3

Answer 5

为我工作与旧版和新版jQuery版本：

/** 
* @link http://stackoverflow.com/a/26892146/655224 
*/ 
jQuery.fn.getEvents = function() { 
    if (typeof(jQuery._data) == 'function') { 
     return jQuery._data(this.get(0), 'events') || {}; 
    } else if (typeof(this.data) == 'function') { // jQuery version < 1.7.? 
     return this.data('events') || {}; 
    } 
    return {}; 
}; 

jQuery.fn.preBind = function(type, data, fn) { 
    this.each(function() { 
     var $this = jQuery(this); 

     $this.bind(type, data, fn); 

     var currentBindings = $this.getEvents()[type]; 
     if (jQuery.isArray(currentBindings)) { 
      currentBindings.unshift(currentBindings.pop()); 
     } 
    }); 
    return this; 
}; 

但要注意，这个功能只能返回/的prebind的事件，这是用jQuery自己设置。

特别感谢@jonathanconway和@Patrick ...

Answer 6

下面是使用更现代。对（）方法的解决方案的一个变种。

// Same as .on() but moves the binding to the front of the queue. 
$.fn.priorityOn = function (type, selector, data, fn) { 
    this.each(function() { 
     var $this = $(this); 

     var types = type.split(" "); 

     for (var t in types) { 
      $this.on(types[t], selector, data, fn); 

      var currentBindings = $._data(this, 'events')[types[t]]; 
      if ($.isArray(currentBindings)) { 
       currentBindings.unshift(currentBindings.pop()); 
      } 
     } 


    }); 
    return this; 
}; 

用法是一样

$(document).priorityOn("click blur change", ".some .selector input", function (e) { 
    // Your code. 
});