jQuery não encontrar objetos DOM adicionados dinamicamente?

Question

Eu sou muito novo para jQuery ... Eu usei Javascript muitas vezes e estou bastante familiarizado com a manipulação DOM, mas simplesmente não a API ou engrenagens do jQuery.

Estou dinamicamente adicionando elementos DOM através de uma chamada JSON assim:

$(document).ready(function() {
        var url = "jsonMenuItems.js";
        $.getJSON(url, null, function(data) {
            var html = "";
            //alert(data.items);
            data = data.items;
            for (var key in data) {      
                html += "<td class=\"menuItem\"><span>" + data[key].name + "</span></td>";
            };
            $("#menuTR").html(html);
        });

        var lZeroArray = $("#menu td");
        lZeroArray.click(function() {
            $("#submenu").slideDown("fast");
        });
    });

Se os itens TD está na página manualmente a função de clique slideDown funciona perfeitamente ... se eu usar o código acima para adicionar dinamicamente os itens TD, em seguida, a função de clique slideDown não dispara.

jQuery não consegue encontrar o seu próprio itens adicionados ou estou fazendo algo errado?

Answer 1

Dê uma olhada em jQuery ao vivo. Isso permitirá que você vincular eventos para itens adicionados dinamicamente.

$("#menu td").live("click", function(){
    $("#submenu").slideDown("fast");
});

Answer 2

O problema é: o manipulador de eventos é obrigado a $('#menu td'), mas no momento em que isso é feito, não há tds na #menu

usando live() garante que jQuery adiciona manipuladores de eventos para objetos adicionados mais tarde para o DOM.

Como alternativa, uma solução usado em versões mais antigas do jQuery seria:

    var url = "jsonMenuItems.js";
    $.getJSON(url, null, function(data) {
        var html = "";
        //alert(data.items);
        data = data.items;
        for (var key in data) {
                  html += "<td class=\"menuItem\"><span>" + data[key].name + "</span></td>";
        };
        $("#menuTR").html(html);
        $("#menu td").click(function() { 
           $("#submenu").slideDown("fast");
        });
    });
    var lZeroArray = $("#menu td");
    lZeroArray.click(function() { 
       $("#submenu").slideDown("fast");
    });

Answer 3

Parece que você está adicionando o evento clique aos elementos errados. Você está adicionando os TDs adicionados dinamicamente para um elemento com id = "menuTR", mas você está definindo o evento clique em elementos TD que são descendentes de id = "menu"

Para testar, tente mudar $ ( "# menu de td") para US $ ( "# menuTR td"), ou vice-versa. Como alternativa, você pode tentar selecionar os elementos com $ ( "td.menuItem"), que seleciona todos os elementos TD com uma classe de menuItem.

Answer 4

Isso é porque você tem que reaplicar a funcionalidade clique para eles depois que eles são criados:

$.getJSON(url, null, function(data) {
        var html = "";
        //alert(data.items);
        data = data.items;
        for (var key in data) {      
            html += "<td class=\"menuItem\"><span>" + data[key].name + "</span></td>";
        };
        $("#menuTR").html(html);

        $("#menu td").click(function() {
            $("#submenu").slideDown("fast");
        });

    });