El evento click () está llamando dos veces en jquery

Configuré un elemento de enlace y llamé a su evento de clic en jquery, pero el evento de clic llama dos veces, consulte a continuación el código de jquery.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Por favor avise.

Gracias.

Asegúrese y verifique que no haya incluido accidentalmente su script dos veces en su página HTML.

Desenlazar antes del clic;

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Significa que su código incluyó el script jquery dos veces. Pero prueba esto:

$("#btn").unbind("click").click(function(){

//your code

});

Lo intenté e.stopImmediatePropagation(); Esto parece funcionar para mí.

En mi caso, utilicé el siguiente script para solucionar el problema.

$('#id').off().on('click',function(){
    //...
});

off()desvincula todos los eventos a los que se vincula #id. Si desea desvincular solo el clickevento, utilice off('click').

Simplemente llame a .off () justo antes de llamar a .on ().

Esto eliminará todos los controladores de eventos:

$(element).off().on('click', function() {
// function body
});

Para eliminar solo los controladores de eventos de 'clic' registrados:

$(element).off('click').on('click', function() {
// function body
});

Una solución bastante común al problema de los dos clics es poner

e.stopPropagation()

al final de su función (suponiendo que use function(e)eso). Esto evita que el evento se propague, lo que podría llevar a una segunda ejecución de la función.

Tuve el mismo problema, pero puedes intentar cambiar este código

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

a esto:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Para mí, este código resolvió el problema. Pero tenga cuidado de no incluir accidentalmente su script dos veces en su página HTML. Creo que si está haciendo estas dos cosas correctamente, su código funcionará correctamente. Gracias

por favor intente esto

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

Este es definitivamente un error, especialmente mientras es FireFox. Busqué mucho, intenté todas las respuestas anteriores y finalmente lo obtuve como error de muchos expertos sobre SO. Entonces, finalmente se me ocurrió esta idea declarando una variable como

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

De esta manera, primero verifica si la función fue llamada previamente o no.

Agregar e.preventDefault();al comienzo de mi función funcionó para mí.

Esta es una pregunta anterior, pero si está utilizando la delegación de eventos, esto es lo que me causó.

Después de quitarlo .delegate-twodejó de ejecutarse dos veces. Creo que esto sucede si ambos delegados están presentes en la misma página.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

este fragmento de código no contiene nada malo. Es otra parte de tu guión como dijo @karim

En mi caso, funcionaba bien en Chrome e IE llamaba .click()dos veces. si ese era su problema, lo solucioné devolviendo falso, después de llamar al .click()evento

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

Llamar unbindresolvió mi problema:

$("#btn").unbind("click").click(function() {
    // your code
});

No estoy seguro de por qué, pero tuve este problema con

$(document).on("click", ".my-element", function (e) { });

Cuando lo cambié a

$(".my-element").click(function () { });

Problema fue resuelto. Pero definitivamente hay algo mal en mi código.

Me engañó una selección que coincidía con varios elementos, por lo que se hizo clic en cada uno. :firstayudado:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

Yo también tuve este problema en FF. Sin embargo, mi etiqueta estaba unida a una <a>etiqueta. Aunque la <a>etiqueta no iba a ninguna parte, hizo doble clic. Cambié la <a>etiqueta por una <span>etiqueta y el problema del doble clic desapareció.

Otra alternativa es eliminar el atributo href por completo si el enlace no va a ninguna parte.

Me enfrenté a este problema porque mi $(elem).click(function(){});script se colocó en línea en un div que estaba configurado en style="display:none;".

Cuando la pantalla css se cambiaba a bloque, el script agregaba el detector de eventos por segunda vez. Moví el script a un archivo .js separado y ya no se inició el detector de eventos duplicado.

Cuando utilizo este método en la página de carga con jquery, escribo $('#obj').off('click');antes de configurar la función de clic, para que no se produzca la burbuja. Funciona para mi.

Mi respuesta simple fue convertir el enlace de clic en una función y llamarlo desde el clic del elemento: ¡funcionó de maravilla! mientras que ninguno de los anteriores lo hizo

Si su evento llama dos o tres veces, o más, esto podría ayudar.

Si está usando algo como esto para activar eventos ...

$('.js-someclass').click();

... luego preste atención a la cantidad de .js-someclasselementos que tiene en la página, porque activará el evento de clic para todos los elementos, ¡y no solo una vez!

Entonces, una solución simple es asegurarse de activar el clic solo una vez, seleccionando solo el primer elemento , por ejemplo:

$('.js-someclass:first').click();

Seguro que en algún otro lugar de su (s) script (s), el evento "clic" está vinculado nuevamente al mismo elemento, como sugieren otras respuestas / comentarios.

Tuve un problema similar y para verificarlo, simplemente agregué un console.logcomando a mi script, como en el siguiente fragmento:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Si, al hacer clic en el botón, obtiene algo similar a la imagen de abajo desde la consola de desarrollo de su navegador (como lo hice yo), entonces estará seguro de que el click()evento se ha vinculado dos veces al mismo botón.

Si necesita un parche rápido, la solución propuesta por otros comentaristas de usar el offmétodo (por cierto, unbindestá en desuso desde jQuery 3.0) para desvincular el evento antes de (re) vincularlo funciona bien, y también lo recomiendo:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

Desafortunadamente, ¡esto es solo un parche temporal! Una vez que se resuelva el problema de hacer feliz a su jefe, debería profundizar un poco más en su código y solucionar el problema de la "vinculación duplicada".

La solución real depende, por supuesto, de su caso de uso específico. En mi caso, por ejemplo, hubo un problema de "contexto". Mi función se invocaba como resultado de una llamada Ajax aplicada a una parte específica del documento: recargar todo el documento en realidad era recargar los contextos de "página" y "elemento", lo que provocaba que el evento se vincule al elemento dos veces .

Mi solución a este problema era aprovechar el jQuery una función, que es la misma que en la excepción de que el evento es desvinculan automáticamente después de la primera solicitud. Eso fue ideal para mi caso de uso, pero nuevamente, podría no ser la solución para otros casos de uso.

Tuvo el mismo problema. Esto funcionó para mí

$('selector').once().click(function() {});

Espero que esto ayude a alguien.

En mi caso, el HTML se diseñó así:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

Y mi jQuery era así:

jQuery('.share').toggle();

Me confundió porque no parecía estar pasando nada. El problema era que la .shares interior toggle anulaba la .shares exterior toggle.

Resolví este problema cambiando el tipo de elemento. en lugar del botón, coloco la entrada, y este problema no ocurre más.

instesd de:

<button onclick="doSomthing()">click me</button>

reemplazar con:

<input onclick="doSomthing()" value="click me">