prev - ¿Cómo desvincularías todos los eventos jQuery de un espacio de nombres particular?

jquery parent

Question

¿Existe una función de desvinculación "global" en jQuery, de modo que pueda eliminar todos los eventos enlazados de un espacio de nombres determinado? p.ej:

// assume these are the events bound to different elements
$(''#foo'').bind(''click.myNS'', ...);
$(''#bar'').bind(''keyup.myNS'', ...);
$(''#baz'').bind(''dblclick.myNS'', ...);    

// magic occurs here...
$.magicalGlobalUnbindFunction(''.myNS'');

// ...and afterwards, the three binds from above are gone

Todos los ejemplos que he visto para desvincular requieren algunos elementos para ser seleccionados primero. Supongo que técnicamente, podrías hacer $(''*'').unbind(''.myNS'') , pero eso parece muy ineficiente.

Answer 1

Debe agregar una clase dentro de la función de enlace

$(''#foo'').bind(''click.myNS'', ...).addClass(''removeLater'');
$(''#bar'').bind(''keyup.myNS'', ...).addClass(''removeLater'');
$(''#baz'').bind(''dblclick.myNS'', ...).addClass(''removeLater'');  

y después

$(''.removeLater'').unbind();

Si #foo #bar y #etc son todos el mismo elemento o conjunto pequeño de ellos, también podría hacer:

$(''div, button'').unbind();

pero si tiene un evento vinculado que no desea eliminar, no sería una buena idea

Answer 2

Debes hackear jQuery internals, aquí hay una demostración funcional de una implementación simple:

http://jsfiddle.net/nkMQv/1/

El trabajo principal se realiza en bucles js regulares y no debe ser muy ineficiente, ya que incluso esta página contiene en última instancia solo 106 elementos para recorrer. Por supuesto, debe usar la delegación de eventos tanto como sea posible para mantener la cantidad de elementos en la colección de manejadores de jQuery lo más pequeña posible.

Answer 3

Necesita usar los métodos de On y Off jQuery. Usa el documento como el selector.

$(document).off(''.myNS'');

$(document).on(''click.myNS'',''#foo'', ...);
$(document).on(''keyup.myNS'',''#bar'', ...);
$(document).on(''dblclick.myNS'',''#baz'','''''');

entonces tus métodos podrían verse como

$(document).on(''click.myNS'',''#foo'', fooClicked);
var fooClicked = function(e){
    var $this = $(e.target);
    // do stuff
}

Answer 4

Puede agregar myNS como clase a cada uno de los elementos en los que desea desvincular los eventos.

Answer 5

Siempre puede ajustar $ .fn.bind y luego almacenar en caché los refs necesarios:

(function ($) {
    var origBind = $.fn.bind,
        boundHash = {};

    $.fn.bind = function (type, data, fn) {
        var namespace = '''',
            events = [];

        if (typeof type === ''string'') {
            // @todo check the allowed chars for event namespaces.
            namespace = type.replace(/^[^.]+/, '''');

            if (namespace.length) {
                events = boundHash[namespace];

                // Namespaces can hold any number of events.
                events = boundHash[namespace] = $.isArray(events) ? events : [];

                // Only really need ref to the html element(s)    
                events.push({
                    type: type, 
                    fn: $.isFunction(fn) ? fn : data, 
                    that: this.length > 1 ? this.toArray() : this[0]
                });
            }
        }

        origBind.apply(this, arguments);
    };

    // namespace to be muffled. Feel free to qualify a specific event type.
    $.muffle = function (namespace, type) {
        var events = [];

        if (boundHash.hasOwnProperty(namespace)) {
            events = boundHash[namespace];

            $.map(events, function (event) {
                var _type = type || event.type;

                if (event.type.indexOf(_type) === 0) {
                    $(event.that).unbind(_type, event.fn);
                }
            });

            // @todo think of better return value.
            return true;
        }

        // @todo think of better return value.
        return false
    };
})(jQuery);

Answer 6

Verdaderamente estás buscando una función mágica global, pero como siempre con la magia, solo puedes ilusionarte, en este caso, con la simplicidad.

También hay una solución jQuery que usa .live() o .delegate() (que es solo una variante de live ()).

Usando $("body").delegate("#foo", "click.myNs", func) también vincula evento y usando $("#body").undelegate(".myNs") lo desvincula. Utilizo aquí el elemento "cuerpo", pero por supuesto puedes usar cualquier elemento que sea ancestro de todos los elementos que necesites unir.

Hará que su trabajo de "desvinculación" sea más rápido, pero una vez más hará que sus eventos respondan más lentamente.

Answer 7

puede anular el método de vinculación de jquery y posteriormente y en la anulación almacenar una referencia de todo el espacio de nombres y los eventos correspondientes en una matriz asociativa y luego acceder a la matriz en función de los eventos de espacio de nombres que desea desvincular. El código podría ser algo como esto

var eventArray=[];
(function ($) {
    var bind = $.fn.bind;
    $.fn.bind= function () {
    var result = bind.apply(this, arguments);
    var selector=arguments[0];
    var nameSpace= selector.split(".")[1];   //code to select the nameSpace eg. click.myNS o/p->myNS (update this if your selector has multiple ''.'')
    if(!eventArray[nameSpace])    //if the associative array does not contain the namespace yet
    {
       eventArray[nameSpace]=[];
    }
    eventArray[nameSpace].push(selector);
    return result;
};
})(jQuery);

Ahora con el evento Array con usted podría desvincularlo como lo desee. Código para desvincular todos los eventos en el espacio de nombres myNS se verá de la siguiente manera:

$.each(eventArray[''myNS''],function(){
   $(this).unbind();
});

Espero que esta sea una buena solución. por favor avíseme si cometí algún error.