¿Por qué no se puede hacer clic en esta casilla de verificación, creada dinámicamente con jQuery?

Question

jsFiddle

Estoy usando un plugin jQuery que permite al usuario dibujar cuadros en un área. Yo uso jQuery para poner una casilla (junto con una lista desplegable) en el recuadro que aparece cuando el usuario suelta el botón del mouse (esto está hacia la parte inferior de javascript en jsFiddle). El problema es que la casilla de verificación no se puede hacer clic.

Tengo algo de código de comprobación de clic en los _mouseStart, _mouseDrag y _mouseStop eventos para detener otra caja que se creen cuando se hace clic en una caja existente, pero no creo que esto está causando el problema, ya que la lista desplegable se puede hacer clic en él y, además, si elimina el código de comprobación de clic, la casilla de verificación no se puede hacer clic.

¿Qué está causando que la casilla de verificación no se pueda hacer clic? Gracias por leer.

EDIT: Gracias a la respuesta de VinayC, ahora puedo ver que el clic llega a la casilla de verificación, con este código:

$('#box').click(function(e){ 
    alert('clicked'); 
    $(this).attr('checked', true); 
}); 

Pero la línea $(this).attr('checked', true); no hace que la casilla marcada. puede alguien decirme por que? He actualizado el jsFiddle

EDIT 2: Harmen notó que el código asigna el mismo ID a cada casilla de verificación. En el código actual hay un contador adjunto a la identificación, por lo que cada uno es único, pero lo he descartado porque creo que esto es solo un problema de jQuery. Cambiaría el jsFiddle, pero si solo creas un cuadro (por lo tanto, una casilla de verificación), ocurre el mismo problema.

Answer 1

tengo ni idea de por qué, pero mientras que volverse locos (sí, en fiddlejs), esto parece hacer el truco

$('#box', ui.box).click(
     function(evt){ 
      evt.stopPropagation(); 
     } 
    ); 

cuando la creación de la caja. Ver: http://jsfiddle.net/BBh3r/9/

De hecho, estaba tratando de interceptar el evento y configurarlo manualmente, pero si no hay necesidad de configurarlo, entonces eh .. ¿Tal vez hay un evento adicional generado en algún lugar que niega el primero ...? Click's solo se activó una vez.

podría estar relacionado con building jquery checkbox - can't set checked value

PS. Solo probado en Chrome para Linux

Answer 2

Parece que los controladores de eventos de nivel superior están cancelando el evento de clic. Agregue el controlador de eventos onclick en las alertas del elemento de casilla de verificación y verá que el clic llega a la casilla de verificación.

Answer 3

Está creando varias casillas de verificación con el mismo id.

Answer 4

En realidad, se marca mientras la alerta está visible, pero luego se desactiva. Supongo que después de que el controlador de eventos lo configure para que se active, se produce el evento predeterminado para el clic (que es alternar la marca de verificación) y, como está marcado en este momento, se desactiva nuevamente. Intente llamar al preventDefault desde el controlador de clics.

Answer 5

También puede probar esto por un enfoque más universal

Esto funcionó para mí.

$(document).click(function (e) { 
    if (element.tagName == 'INPUT') { 
     if ($(element).attr("type") == 'checkbox') { 
     e.stopPropagation();         
     e.preventBubble();        
     return; 
     } 
    } 
});