Saltar al contenido

$(documento).on(“clic”… no funciona?

Después de de una prolongada compilación de información hemos podido solucionar este atolladero que tienen algunos de nuestros lectores. Te dejamos la respuesta y nuestro objetivo es servirte de gran ayuda.

Solución:

Está utilizando la sintaxis correcta para vincular al documento para escuchar un evento de clic para un elemento con.

Probablemente no esté funcionando debido a uno de:

  • No usar la versión reciente de jQuery
  • No envolver su código dentro de DOM listo
  • o está haciendo algo que hace que el evento no aparezca en el oyente del documento.

Para capturar eventos en elementos que se crean DESPUÉS declarando sus oyentes de eventos: debe vincularse a un elemento principal o un elemento más alto en la jerarquía.

Por ejemplo:

$(document).ready(function() 
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() 
        alert("click bound to document listening for #test-element");
    );

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() 
        alert("click bound directly to #test-element");
    );

    // Create the dynamic element '#test-element'
    $('body').append('
Click mee
'); );

En este ejemplo, solo se activará la alerta “vinculado al documento”.

JSFiddle con jQuery 1.9.1

Su código debería funcionar, pero soy consciente de que la respuesta no lo ayuda. Puede ver un ejemplo de trabajo aquí (jsfiddle).

jquery:

$(document).on('click','#test-element',function()
    alert("You clicked the element with and ID of 'test-element'");
);

Como alguien ya señaló, está utilizando una identificación en lugar de una clase. Si tiene más de un elemento en la página con una ID, jquery devolverá solo el primer elemento con ese ID. No habrá ningún error porque así es como funciona. Si este es el problema, notará que el evento de clic funciona por primera vez. test-element pero no para ninguno de los que siguen.

Si esto no describe con precisión los síntomas del problema, entonces quizás su selector esté equivocado. Su actualización me lleva a creer que este es el caso debido a que inspeccioné un elemento y luego volví a hacer clic en la página y activé el clic. Lo que podría estar causando esto es si coloca el detector de eventos en el document en vez de test-element. Si es así, cuando haga clic en el documento y vuelva a encenderlo (como desde la ventana del desarrollador para volver al documento), el evento se activará. Si este es el caso, también notará que el evento de clic se activa si hace clic entre dos pestañas diferentes (porque son dos pestañas diferentes). documents y, por lo tanto, está haciendo clic en el documento.

Si ninguna de estas es la respuesta, publicar HTML contribuirá en gran medida a resolverlo.

Una publicación anterior, pero me encanta compartir ya que tengo el mismo caso pero finalmente supe el problema:

El problema es: hacemos una función para trabajar con un elemento HTML especificado, pero el elemento HTML relacionado con esta función aún no se ha creado (porque el elemento se generó dinámicamente). Para que funcione, debemos hacer la función al mismo tiempo que creamos el elemento. Elemento primero que función relacionada con él.

Simplemente palabra, una función solo funcionará para el elemento que la creó antes (él). Cualquier elemento que creó dinámicamente significa después de él.

Pero inspeccione esta muestra que no prestó atención al caso anterior:

Anexado dinámicamente:


Esta función funciona bien haciendo clic en el botón:

$(document).ready(function()     
        $('#selected-country').on('click','.btn-map', function() 
        var datacountry = $(this).data('country'); console.log(datacountry);
    );
)

o puedes usar un cuerpo como:

$('body').on('click','.btn-map', function() 
            var datacountry = $(this).data('country'); console.log(datacountry);
        );

compare con esto que no funciona:

$(document).ready(function()      
$('.btn-map').on("click", function()  
        var datacountry = $(this).data('country'); alert(datacountry);
    );
);

espero que ayude

Si te gusta la programación, puedes dejar un enunciado acerca de qué te ha parecido este escrito.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *