jQuery ne trouve pas ajouté dynamiquement les objets DOM?

Question

Je suis très nouveau à jQuery ... Je l'ai utilisé plusieurs fois Javascript et je suis très familier avec la manipulation du DOM, mais tout simplement pas l'API ou de rapports jQuery.

J'ajoute dynamiquement des éléments DOM via un appel JSON comme ceci:

$(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");
        });
    });

Si les éléments de TD sont sur la page manuellement la fonction de clic slideDown fonctionne parfaitement ... si j'utilise le code ci-dessus pour ajouter dynamiquement les éléments de TD alors la fonction de clic slideDown ne se déclenche pas.

jQuery ne peut pas trouver ses propres articles ajoutés ou que je fais quelque chose de mal?

Answer 1

Jetez un oeil à jQuery vivre . Cela vous permettra de lier les événements aux éléments ajoutés dynamiquement.

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

Answer 2

le problème est: votre gestionnaire d'événements est lié à $('#menu td'), mais au moment où cela est fait, il n'y a pas tds dans le #menu

à l'aide live() veille à ce que jquery ajoute des gestionnaires d'événements aux objets ajoutés plus tard au DOM.

Alternativement, une solution utilisée dans les versions plus anciennes jquery serait:

    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

On dirait que vous ajoutez l'événement de clic pour les mauvais éléments. Vous ajoutez les TDs dynamiquement ajoutés à un élément avec id = « menuTR », mais vous configurez l'événement, cliquez sur les éléments de TD qui sont des descendants de id = « menu »

Pour tester, essayez de changer $ (menu "# td") à $ ( "# menuTR td"), ou vice versa. Alternativement, vous pouvez essayer de choisir les éléments avec $ ( « td.menuItem »), qui sélectionne tous les éléments de TD avec une classe de ligneMenu.

Answer 4

C'est parce que vous devez présenter une nouvelle demande de la fonctionnalité de clic pour eux après leur création:

$.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");
        });

    });