jQueryは動的に追加されたDOMオブジェクトを見つけられませんか？

Question

私はjQueryで非常に新しいです...私は何度もJavascriptを使いましたが、DOM操作に精通していますが、jQueryのAPIやギアではありません。

私は動的にそのようなJSON呼び出しによってDOM要素を追加してい

：TD項目を手動でページにslideDownは完璧に動作クリック機能している場合...私は動的に上記のコードを使用している場合

$(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アイテムを追加すると、クリック機能のslideDownは起動しません。

jQueryがそれ自身の追加項目を見つけられないか、何か間違っていますか？

Answer 1

jQuery liveをご覧ください。これにより、動的に追加された項目にイベントをバインドすることができます。

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

Answer 2

誤った要素にクリックイベントが追加されているようです。 id = "menuTR"の要素に動的に追加されたTDを追加していますが、id = "menu"の子孫であるTD要素にclickイベントを設定しています

テストするには、 #menu td "）から$（"＃menuTR td "）へ、またはその逆になります。あるいは、$（ "td.menuItem"）で要素を選択すると、menuItemのクラスを持つすべてのTD要素が選択されます。

Answer 3

問題は、イベントハンドラが$('#menu td')にバインドされていますが、これが行われた時点で#menuにはtdがありません。

live()を使用すると、後でDOMに追加されるオブジェクトにjqueryがイベントハンドラを追加するようになります。

また、古いjqueryのバージョンで使用されるソリューションは、次のようになります。

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

    });