javascript - validacion - jQuery: ¿cómo puedo desactivar temporalmente el detector de eventos onclick una vez que se ha activado el evento?

validar formulario javascript html5

Question

¿Cómo puedo desactivar temporalmente el detector de eventos onclick, (jQuery preferido), después de que se haya disparado el evento?

Ejemplo:

Después de que el usuario haga clic en el botón y active esta función a continuación, deseo desactivar el oyente onclick, por lo tanto, no ejecutaré el mismo comando en mi vista django.

$(".btnRemove").click(function(){
   $(this).attr("src", "/url/to/ajax-loader.gif");
   $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data){
            $.each(returned_data, function(i, item){
              // do stuff                       
     });
   }
});

Muchas gracias,

Aldo

Answer 1

¿Por cuánto tiempo desea desactivar el detector de eventos click? Una forma es desvincular al oyente del evento mediante la unbind de jQuery http://docs.jquery.com/Events/unbind .

Pero lo mejor es practicar para no desvincular un evento solo para volver a vincularlo más tarde. Use un booleano en su lugar.

var active = true;
$(".btnRemove").click(function() {
    if (!active) {
        return;
    }
    active = false;
    $(this).attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            active = true; // activate it again !
            $.each(returned_data, function(i, item) {
                // do stuff                       
            });
        }
    });
});

editar: para estar seguro, también debería preocuparse por las otras rutinas de finalización de ajax (solo hay tres: success , error , complete ver documentos ) o si no, puede permanecer active como falso.

Answer 2

¿Por qué no desactivar el botón? ¿Alguna razón específica por la que desea deshabilitar este listner solo? BTB, desde tu código, veo que estás haciendo una llamada ajax. ¿Quiere específicamente bloquear al usuario hasta que vuelva la llamada? Si es así, puedes probar blockUI , un plugin jQuery

Answer 3

Configuraría una variable global para hacer un seguimiento de las solicitudes AJAX ...

var myApp = {
  ajax: null
}

Y luego ten este poquito de magia para detener solicitudes simultáneas ...

// Fired when an AJAX request begins
$.ajaxStart(function() { myApp.ajax = 1 });

// Fired when an AJAX request completes
$.ajaxComplete(function() { myApp.ajax = null });

// Fired before an AJAX request begins
$.ajaxSend(function(e, xhr, opt) {
  if(myApp.ajax != null) {
    alert("A request is currently processing. Please wait.");
    xhr.abort();
  }
});

Con este enfoque, no debería tener que volver atrás a través de su código y modificar cada una de sus llamadas AJAX. (algo que llamo una solución de "agregar")

Answer 4

Hay muchas formas de hacerlo. Por ejemplo:

$(".btnRemove").click(function() {
    var $this = $(this);
    if ($this.data("executing")) return;
    $this
        .data("executing", true)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeData("executing");
    });
});

o

$(".btnRemove").click(handler);

function handler() {
    var $this = $(this)
        .off("click", handler)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.click(handler);
    });
}

También podemos usar la delegación de eventos para obtener un código más claro y un mejor rendimiento:

$(document).on("click", ".btnRemove:not(.unclickable)", function() {
    var $this = $(this)
        .addClass("unclickable")
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeClass("unclickable");
    });
});

Si no necesitamos volver a habilitar el controlador después de que se haya ejecutado, entonces podemos usar el método .one() . Vincula a los controladores que deben ejecutarse solo una vez. Consulte los documentos de jQuery: http://api.jquery.com/one

Answer 5

Puede realizar la acción dentro del clic en función de un valor booleano. Cuando se hace clic en él, cambie el valor booleano y use setTimeout () para volver a cambiarlo después de unos segundos. Eso limitaría efectivamente al usuario al hacer clic en el botón solo una vez cada pocos segundos.

var isEnabled = true;

$("a.clickMe").click(function(e){
  e.preventDefault();
  if (isEnabled == true) {
    isEnabled = false; // disable future clicks for now
    do_Something();
    setTimeout(function(){
      isEnabled = true;
    }, 3000); // restore functionality after 3 seconds
  }
});

Answer 6

Si está publicando a través de ajax, puede desactivar el botón al hacer clic y habilitarlo una vez que finalice el proceso. Pero si está publicando de vuelta, no puede simplemente desactivar el botón. Al deshabilitar el botón, el evento de clic del lado del servidor no se dispara. Así que simplemente oculta el botón al hacer clic y muestra un mensaje fácil de usar. La publicación sobre cómo desactivar el botón asp.net en la devolución de datos ayuda.

Answer 7

Sugeriría deshabilitar el botón, luego volver a habilitarlo en sus rutinas de finalización Ajax (éxito o fracaso, recuerde). Si le preocupa que el navegador no respete su desactivación del botón, puede respaldarlo con su propia marca en el botón (por ejemplo, establezca un atributo llamado data-disabled , use el prefijo de data- como buena práctica y sea compatible con HTML5 ) Pero salvo que en realidad tenga problemas con los navegadores que no deshabiliten el botón, probablemente lo considere lo suficientemente bueno.

Answer 8

Utilizaría una clase, por ejemplo, ''ajax-running''. El evento click solo se ejecutará si el elemento cliqueado no tiene la clase ''ajax-running''. Tan pronto como finalice su llamada ajax, puede eliminar la clase ''ajax-running'' para que pueda volver a hacer clic.

$(".btnRemove").click(function(){
    var $button         = $(this);
    var is_ajaxRunning  = $button.hasClass(''ajax-running'');
    if( !is_ajaxRunning ){
        $.ajax({
            ...
            success: function(returned_data) {
                ...
                $button.removeClass(''ajax-running'');
            });
        };
    }   
});

Answer 9

también puedes ocultar el botón (o el div que contiene)

$(".btnRemove").click(function() {
   $(this).hide();
   // your code here...
})

y puedes simplemente llamar a .show () si necesitas volver a mostrarlo.

Además, dependiendo de su caso de uso, debería considerar usar una superposición de carga en su lugar

Answer 10

var ajaxAction = function() {
    var ele = $(this);
    ele.unbind("click", ajaxAction);
    ele.attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            $.each(returned_data, function(i, item) {
            });
        },
        complete: function() {
            ele.bind("click", ajaxAction);
        }
    });
}
$(".btnRemove").click(ajaxAction);