javascript - evento - unbind jquery

jQuery off() no está desvinculando eventos cuando usa bind

Question

function bubble(content, triggerElm){
this.element = $(''<div class="bubble" />'').html(content);
this.element.css(.....) // here is positioned based on triggerElm
}
bubble.prototype.show = function(){
$(document).on(''click'', this._click.bind(this));
this.element.css(....)
};
bubble.prototype.hide = function(){
$(document).off(''click'', this._click.bind(this));
this.element.css(....)
};
bubble.prototype._click = function(event){
console.log(''click'', this);
if(this.element.is(event.target) || (this.element.has(event.target).length > 0))
return true;
this.hide();
};
var b = new bubble();
b.show();
b.hide();

Sigo viendo clic en la consola, por lo que el clic no se desvincula. Pero si elimino la llamada bind (), el clic queda desvinculado. ¿Alguien sabe por qué? Necesito una forma de poder cambiar "esto" dentro de mi función de prueba, es por eso que estoy usando bind ()

Answer 1

Por favor, lea https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

bind crea una nueva función, por lo tanto, hace $(document).on(''click'', test.bind(this)); es como $(document).on(''click'', function(){}); y cada vez que lo ejecutas invocas una nueva función anónima, por lo que no tienes una referencia para desvincularla.

Si hicieras algo como:

var test = function(){
console.log(''click'');
};
var newFunct = test.bind(this);
$(document).on(''click'', newFunct );
$(document).off(''click'', newFunct );

Debería funcionar bien

por ejemplo: http://jsfiddle.net/508dr0hv/

Además, no se recomienda usar bind, es lento y no es compatible con algunos navegadores.

Answer 2

Una opción sería ponerle nombre al evento :

$(document).on(''click.name'', test.bind(this));
$(document).off(''click.name'');

Ejemplo aquí

Answer 3

intente utilizar el proxy de jQuery para obtener una referencia única de su función.

De esta forma, cuando llame $ .proxy (prueba, esto), comprobará si esta función ya ha sido referenciada anteriormente. En caso afirmativo, el proxy le devolverá esa referencia; de lo contrario, creará una y se la devolverá. De modo que, siempre puedes obtener tu función original, en lugar de crearla una y otra vez (como usar bind).

Por lo tanto, cuando cancela () y pasa la referencia de su función de prueba, off () eliminará su función del evento click.

Y también, su función de prueba debe declararse antes de usarla.

var test = function(){
console.log(''click'');
};
$(document).on(''click'', $.proxy(test, this));
$(document).off(''click'', $.proxy(test, this));

http://jsfiddle.net/aw50yj7f/

Answer 4

El problema es que this._click.bind() crea una nueva función cada vez que se this._click.bind() . Para separar un controlador de eventos específico, debe pasar la función original que se utilizó para crear el controlador de eventos y eso no sucede aquí, por lo que el controlador no se elimina.

Si solo hay algunas bubble en su aplicación, puede ir por la ruta de Douglas Crockford y simplemente no usar this . Eso eliminará mucha confusión sobre a lo que se refiere esto y asegurará que cada bubble conserve una referencia a su propia función de click que puede usarse para eliminar el evento según sea necesario:

function bubble(content, tiggerElm) {
var element = $(''<div class="bubble" />'').html(content);
element.css(.....); // here is positioned based on triggerElm
function click(event) {
console.log(''click'', element);
if (element.is(event.target) ||
element.has(event.target).length > 0) {
return true;
}
hide();
}
function show() {
$(document).on(''click'', click);
element.css(....);
}
function hide() {
$(document).off(''click'', click);
element.css(....);
}
return {
show: show,
hide: hide
};
}
var b1 = bubble(..., ...);
b1.show();
var b2 = bubble(..., ...);
b2.show();

Vea cómo esto lo libera de utilizar dispositivos como .bind() y métodos con guiones bajos.