jQuery vincular el detector de eventos antes que otro

Question

Utilizando el complemento prettyPhoto para abrir contenedores de contenido de estilo modal e intentando integrar con el seguimiento de eventos de Google Analytics para rastrear cuándo se abren los videos.

El problema es que cuando me

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

el evento nunca se dispara, como PrettyPhoto detiene el caso de continuar (con razón, ya que de lo contrario la página cambiaría si un hipervínculo se ha hecho clic).

prettyPhoto no parece proporcionar una función de devolución de llamada 'abierta', pero si lo hiciera no podría usarlo de todos modos, ya que los escuchas de prettyPhoto están configurados en algún lugar del diseño (usamos rel="prettyPhoto" cada vez que queremos usar prettyPhoto, y pasa los parámetros a través de la URL, que es la forma recomendada por prettyPhoto de hacer las cosas). También me gustaría pasar los detalles del producto a Analytics, descartando a un oyente de apertura de video global en todos los eventos de apertura de prettyPhoto.

¿Cómo puedo vincular a mi oyente antes de el oyente prettyPhoto? Si resulta que tengo que usar .unbind(), enlazar mi oyente, y luego volver a enlazar prettyPhoto, ¿cómo puedo desvincular un controlador especificado en un complemento?

Answer 1

Idealmente, usted será capaz de añadir su suceso de unión antes de cualquier otro, de manera que éste se ejecuta primero.

Desafortunadamente, jQuery no parece incluir ninguna de estas facilidades.

Sin embargo, he codificado un preBind method, que parece hacer el truco:

$.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; 
}; 

Uso:

$('#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

si usa unbind(), incluso las vinculaciones creadas por los complementos se desvincularán.

Answer 3

estoy usando el método preBind de Jonathan, con ligeras modificaciones, y lo hace el truco muy bien.

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

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

     var currentBindings = $this.data('events')[type]; 
     if ($.isArray(currentBindings)) { 
      currentBindings.unshift(currentBindings.pop()); 
     } 
    }); 
    return this; 
}; 

Answer 4

tuvo que cambiar una línea en el código anterior para hacer que funcione:

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

Esto podría ser porque estoy usando jQuery 2.0.3

Answer 5

a mí me funcionó con mayores y más recientes jQuery versiones:

/** 
* @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; 
}; 

Pero ojo, esto funciona sólo pueden volver/prebind que los eventos que se configurado con jQuery.

Un agradecimiento especial a @jonathanconway y @Patrick ...

Answer 6

Aquí es una variante de la solución utilizando el enfoque más moderno .En().

// 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; 
}; 

El uso es como

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