jQuery لا يجد كائنات DOM إضافية ديناميكيا؟

Question

أنا جديد جدا في مسج ... لقد استخدمت جافا سكريبت عدة مرات وأنا على دراية تماما بمعالجة DOM ولكن ببساطة ليس API أو Gears of JQuery.

أنا أضيف عناصر DOM ديناميكيا عبر مكالمة JSON مثل:

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

إذا كانت عناصر TD موجودة على الصفحة يدويا، تعمل وظيفة النقر بشكل مثالي ... إذا كنت تستخدم التعليمات البرمجية أعلاه لإضافة عناصر TD بشكل حيوي، فإن وظيفة النقر لا تطلق النار.

لا يمكن جيسي العثور على العناصر المضافة الخاصة بها أو أفعل شيئا خاطئا؟

Answer 1

ألق نظرة على مسج يعيش. وبعد سيتيح لك ذلك ربط الأحداث عن العناصر المضافة بشكل حيوي.

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

Answer 2

المشكلة هي: معالج الحدث الخاص بك ملزمة $('#menu td'), ، ولكن في ذلك الوقت يتم ذلك، لا يوجد tdS في #menu!

استخدام live() يتأكد من أن JQuery يضيف معالجات الأحداث إلى الكائنات المضافة لاحقا إلى DOM.

بدلا من ذلك، سيكون الحل المستخدم في الإصدارات المسجين الأقدم:

    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

يبدو أنك تضيف الحدث انقر فوق العناصر الخاطئة. يمكنك إضافة TDS المضافة بشكل حيوي إلى عنصر مع ID = "Menutr"، لكنك تقوم بإعداد الحدث Click على عناصر TD أحفاد المعرف = "القائمة"

لاختبار، حاول تغيير $ ("القائمة # TD") إلى $ ("# menutr td")، أو العكس. بالتناوب، يمكنك محاولة تحديد العناصر باستخدام $ ("td.menuitem")، والتي تختار جميع عناصر TD مع فئة من menuitem.

Answer 4

هذا هو أنه يجب عليك إعادة تطبيق وظائف النقر عليها بعد إنشاءها:

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

    });