Tengo un número de divs en mi archivo HTML que se generan de forma dinámica. Cuando agrego el divs, quiero añadir un onclick evento para cada div.

Cada div tiene una dinámica id. El uso de id, ¿cómo se puede agregar un onclick controlador?

Código que genera divs:

function createSlider(resp) {
    $.each(resp, function(key, val) {
        var item = "<div class='item' id="+val.id+">";

        item += "<h2>" + val.category + "</h2>";
        item += "<img src=" + val.image + " alt=" + val.title + ">";
        item += "</div>";

        $(".content-conveyor").append(item);
    });
}
InformationsquelleAutor Romi | 2011-12-03

3 Comentarios

  1. 7

    Puede aplicar la función de clic en el ID después de anexar a la dom. Así que, después de su $(".content-conveyor").append(item); línea, agregar esto:

    $('#' + val.id).click(function() {
    //Do stuff on click
    });


    Edición: Después de pensar en ello más y considerando @Nemoden la respuesta, podrías hacerlo así:

    function createSlider(resp) {
        $.each(resp, function(key, val) {
            var item = "<div class='item' id="+val.id+">";
    
            item += "<h2>" + val.category + "</h2>";
            item += "<img src=" + val.image + " alt=" + val.title + ">";
            item += "</div>";
            var $item = $(item).click(function() {
                //Add on click code here
            });
            $(".content-conveyor").append($item);
        });
    }

    Esto incluye el clic de devolución de llamada sin tener que usar el ID del todo.

    • Esperemos que, val.id es un valor único.
    • Eso es una suposición basada en la OP del código. Se asigna ese valor a la IDENTIFICACIÓN de su nuevo div así, creo que es una suposición segura.
    • Que no era la crítica de la respuesta (que es mi voto), sólo comentario/reflexión de carga.
    • Sí. Realmente nunca se sabe con otras personas de código. 😛
    • Demostración: jsfiddle.net/PhA8U
    • Demo con $item método append: jsfiddle.net/PhA8U/2
    • Gracias! Aquí de la misma cosa con el código editado. Editar me pegaba a él.
    • Muy mal @Nemoden puede que no lo han visto.
    • Gracias por el código, y qué hacer si quiero evento de clic sobre la imagen que está dentro de div
    • Bueno, en mi primer ejemplo, puede utilizar $('#' + val.id + ' img').click(... O, en el segundo ejemplo, se podría utilizar var $item = $(item).find('img').click(.... Nota: el espacio entre la cita y img en el primer ejemplo.

  2. 1

    Usted podría utilizar el nombre de clase del div para un controlador de eventos en todos los elementos que coinciden con el nombre de la clase.

    $(".item").click(function() {
        //
     });
  3. 1

    .live() se utiliza para conectar los controladores de elementos DOM que podría no existir en el DOM.
    Después de $(".content-conveyor").append($item); agregar el siguiente código.

     $('#' + val.id).live(click,function() {
     //your code here
     });
    • Si te paras a pensar en .live() y cómo se utiliza, que en realidad no hacen mucho sentido cuando se utiliza un id selector que se encuentra en esta situación.
    • Tal vez $('.content-conveyor div').live(... sería mejor, pero eso depende del código del usuario.
    • .live() ahora es obsoleto y se retira como de jQuery 1.9: jquery.com/upgrade-guide/1.9/#live-removed

Dejar respuesta

Please enter your comment!
Please enter your name here