Dentro de un jQuery bucle, estoy tratando de conectar un evento click a una creados dinámicamente etiqueta de anclaje que está contenida en un elemento de LI. El LI en sí es creado dinámicamente en el interior de una estática UL elemento. Por alguna razón, nada se desencadena cuando el anclaje se hace clic. Esta es una versión simplificada de la problemática código:

$.each($.MyProject.cities, function (index, city) {
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
        console.info("Anchor clicked!");
        event.preventDefault();
        return false;
    }).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});

donde visiblecities es el id del elemento UL y ciudades es una colección en la que el bucle se repite.

Alguna idea de por qué el evento click no funciona?

3 Comentarios

  1. 4

    Uso evento delegación para establecer un único controlador de eventos que va a reaccionar a todo <a> elementos, aunque se haya agregado después de se ejecuta el código:

    $('#visibleCities').on('click', 'a', function(event) {
        console.info('Anchor clicked!');
        event.preventDefault();
        return false;
    });

    Aunque, como gdoron se menciona en los comentarios, su <a> elementos que actualmente no tiene ningún contenido, de modo que en realidad no se puede hacer clic.

    • He puesto de nuevo el interior span elemento que forma el contenido. Todavía su respuesta anterior no funciona.
    • Cualquier posibilidad de que usted podría proporcionar un jsFiddle demo?
    • jsfiddle.net/n2f4m/19
    • hey todo está funcionando bien, usted acaba de hacer un simple error que escribió $(‘#visiblecities’) pero debe ser de $(‘#visibleCities’) ver aquí jsfiddle.net/n2f4m/27
    • Como Peeyush dijo, sólo hay una errata con el selector de id (en la pregunta y mi respuesta); he cambiado eso por lo que tiene una mayúsculas C.
    • Peeyush, gracias veo la jsfiddle código de trabajo. En mi mundo real del proyecto, sin embargo, no está funcionando. Quizá porque mi UL está contenido en un div que es un hijo de otro div. Y yo estoy llamando .show() y .hide() métodos en la mayor div. Es eso un problema?
    • No, la visibilidad no debería ser un problema. Mientras el #visibleCities elemento que realmente existe (incluso si están ocultos) cuando se carga la página, y .on() se llama, va a estar bien.
    • Gracias chicos. Se ordenan ahora. Hubo un poco de desenfoque de eventos en un cuadro de texto que se escondía el mayor div. Una vez que zafé el desenfoque caso, funcionó a la perfección!

  2. 1

    uso .on.

    $('a').on('click',function(){
       //code here
    });

    Intentar

    $('li a').on('click',function()
    {
        //code here
    });
    
    $.each($.MyProject.cities, function (index, city)
    {
        $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
    });
    • Esto es incorrecto. no cree un delegado evento aunque usted utiliza on. 4 respuestas 4 respuestas incorrectas.
    • ahora comprobar si hay algo mal..
    • Siendo incorrecto. leer on docs.
  3. 0

    utilizar método directo en lugar de hacer clic

     $.each($.MyProject.cities, function (index, city) {
            $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
        });
    • Una y mil veces ¡NO!. Que la función ha sido desaprobado por meses (desde jQuery 1.7 fue liberado), ha sido retirado de jQuery completamente en la versión 1.9, y se une a los controladores de eventos directamente en el documento. También está pensado para ser llamado una vez para reaccionar a todos los elementos, no se llama una vez por cada elemento.

Dejar respuesta

Please enter your comment!
Please enter your name here