evento - jQuery Click se dispara dos veces al hacer clic en la etiqueta

simulate click jquery

Question

Estoy usando jQuery para crear botones de radio personalizados y tengo un problema. Al hacer clic en la etiqueta asociada a la radio, los eventos de clic se disparan dos veces; si solo hago clic en la radio, funciona bien (bueno, no es la radio la que estoy haciendo clic, sino la div que envuelve toda la entrada y la etiqueta). Aquí está el código:

El HTML:

 <div id="box">
     <asp:RadioButtonList ID="RadioButtonList1" runat="server">
         <asp:ListItem>RADIO1</asp:ListItem>
         <asp:ListItem>RADIO2</asp:ListItem>
         <asp:ListItem>RADIO3</asp:ListItem>
     </asp:RadioButtonList>
</div>

jQuery:

<script type="text/javascript">
       $(function () {
            $(''#box'').find(''input:radio'').each(function (i) {

            var input = $(this);
            // get the associated label using the input''s id
            var label = $(''label[for='' + input.attr(''id'') + '']'');
            // wrap the input + label in a div
            $(''<div class="custom-radio"></div>'').insertBefore(input).append(label, input);

            var wrapperDiv = input.parent();

            // find all inputs in this set using the shared name attribute
            var allInputs = $(''input[name='' + input.attr(''name'') + '']'');

            // necessary for browsers that don''t support the :hover pseudo class on labels
            label.hover(

            function () {
                $(this).addClass(''hover'');
            }, function () {
                $(this).removeClass(''hover checkedHover'');
            });

            //bind custom event, trigger it, bind click,focus,blur events
            wrapperDiv.bind(''updateState'', function () {
                if ($(this)[0].children[1].checked) {
                    allInputs.each(function () {
                        var curDiv = $(''div > label[for='' + $(this).attr(''id'') + '']'').parent();
                        curDiv.removeClass(''custom-radio-checked'');
                        curDiv.addClass(''custom-radio'');
                    });
                    $(this).toggleClass(''custom-radio custom-radio-checked'');
                }
                else {
                    $(this).removeClass(''custom-radio-checked checkedHover checkedFocus'');
                }

            })
            .trigger(''updateState'')
            .click(function () { console.log(''click''); })
            .focus(function () {
                label.addClass(''focus'');
            }).blur(function () {
                label.removeClass(''focus checkedFocus'');
            });
        }); 
       });
   </script>

¿Hay alguna solución para este comportamiento?

Answer 1

El problema con e.preventDefault (); si detiene la etiqueta, haga clic en el botón de opción.

Una mejor solución sería simplemente agregar una verificación rápida "se comprueba" como sigue:

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is('':checked'')){
  **All the code you want to have happen on click**
  }
)};

Answer 2

En mi caso, el problema era que tenía el evento de clic en una función y la función se ejecutó dos veces ... cada ejecución de la función crea un nuevo evento de clic. - Facepalm -

después de mover el evento click fuera de la función, ¡todo funcionó como se esperaba! :)

Answer 3

Enlace el evento de clic a la entrada en lugar de la etiqueta. Cuando se hace clic en la etiqueta, el evento seguirá ocurriendo porque, como mencionó Dustin, al hacer clic en la etiqueta se activa un clic en la entrada. Esto permitirá que la etiqueta mantenga su funcionalidad normal.

$(''input'').click();

En lugar de

$(''label'').click();

Answer 4

Intenté agregar la solución anterior agregando:

evt.stopPropagation();
evt.preventDefault();

pero no funcionó. Sin embargo, agregando esto:

evt.stopImmediatePropagation();

¡resuelve el problema! :)

Answer 5

Intente colocar su etiqueta de entrada fuera del elemento desencadenante, ya que la etiqueta de etiqueta emula el clic, por lo que siempre tendrá más de una llamada.

Answer 6

La mejor respuesta está escondida dentro de los comentarios:

en realidad deberías enlazar para change incluso en el botón de radio ya que se puede hacer clic en el texto de una etiqueta; no siempre hacen clic en el botón de opción. - chovy 12 de diciembre de 13 a 1:45

Este fiddle ilustra que todas las demás soluciones - stopPropagation , stopImmediatePropagation , preventDefault , return false - no cambian nada o destruyen la casilla de verificación / funcionalidad de radio). También ilustra que este es un problema de JavaScript vainilla, no un problema de jQuery.

EDITAR: Otra solución de trabajo que acabo de encontrar en otro hilo es vincular el onclick a la entrada en lugar de la etiqueta. Violín actualizado

Answer 7

Mi problema es un poco diferente, como evt.stopPropagation();evt.preventDefault(); no funciona para mí, solo agrego return false; al final, luego funciona.

$("#addressDiv").on("click", ".goEditAddress", function(event) {
    alert("halo");
    return false;
});

Answer 8

Para solucionar esto de la manera más fácil, elimine el atributo "para" en la etiqueta. Un clic en la etiqueta también activará un clic en el elemento asociado. (que en su caso está disparando su evento click dos veces).

Buena suerte

Answer 9

Prueba agregar:

evt.stopPropagation();
evt.preventDefault();

a .bind () o .click (), lo que sea que esté viendo. Además, agregue el parámetro evt a la función, como function(evt) {...

Answer 10

Si intenta utilizar un contenedor externo como un elemento de clic, también puede permitir que los eventos se desarrollen naturalmente y probar el elemento esperado en su controlador de clics. Este escenario es útil si está tratando de diseñar una zona de clic única para un formulario.

<form>
<div id="outer">
    <label for="mycheckbox">My Checkbox</label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/>
</div>
</form>
<script>
$(''#outer'').on(''click'', function(e){
    // this fires for #outer, label, and input
    if (e.target.tagName == ''INPUT''){
        // only interested in input
        console.log(this);
    }
});
</script>

Answer 11

Usualmente uso este synthax

.off(''click'').on(''click'', function () { console.log(''click''); })

en lugar de

.click(function () { console.log(''click''); })