2009-07-07 70 views
1

我在jQuery上很新穎......我已經多次使用Javascript,並且對DOM操作非常熟悉,但不是API或jQuery的齒輪。jQuery沒有找到動態添加的DOM對象?

我動態通過JSON通話將DOM元素,像這樣:

$(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完美的作品......如果我用上面的代碼,以動態添加TD項目,然後點擊功能slideDown不會觸發。

jQuery無法找到它自己添加的項目,或者我做錯了什麼?

回答

4

看看jQuery live。這將讓您將事件綁定到動態添加的項目。

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

+1生活( )從1.3開始提供。或者如果像我一樣使用1.2,就有一個插件。 – Wayne 2009-07-07 03:15:06

+0

非常感謝你...這工作。還有另一個現場答案,但你的日期是第一次,所以你會得到答覆檢查。 – webwires 2009-07-07 13:33:45

1

它看起來就像是增加點擊事件到錯誤的元素。您將動態添加的TD添加到id =「menuTR」的元素,但是您將設置點擊事件作爲id爲「menu」的後代的TD元素

要測試,請嘗試更改$(「 #menu td「)到$(」#menuTR td「),反之亦然。或者,您可以嘗試使用$(「td.menuItem」)選擇元素,它使用一個menuItem類來選擇所有TD元素。

+0

-1不,webwires聲明選擇器正常工作 - 點擊功能slideDown完美工作。 – Wayne 2009-07-07 03:14:24

6

問題是:您的事件處理函數綁定到$('#menu td'),但是在完成時,#menu中沒有td

使用live()可以確保的jQuery添加事件處理程序稍後添加到DOM對象。

或者,在舊的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"); 
    }); 
0

那是因爲你必須重新點擊功能,它們在創建之後:

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

    });