如何通過其ID jQuery中獲取動態創建的元素

Question

最初添加元素靜態象下面這樣：

<td valign="top" id="description_div"> 
    *<table class="des_box" id="comment_div"> 
     <tr><td class="head" id=file_comments> The function comments </td></tr> 
     <tr><td class="comment" id="test_point_comment_info"></td></tr> 
     </table>* 
</td> 

動態添加如下元素：

$("#description_div").append(
    '<table class="des_box1" id=comment_div><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + id + '></td></tr> </table>') 

現在，當我嘗試通過它的id（即「comment_div」）獲取元素...我無法檢索動態創建的元素。但是能夠通過使用$（「＃comment_div」）

我試圖獲取靜態元素做的元素如下：

$("#comment_div").show(); 

試圖.live（）......但無法獲取動態元素。

$("#comment_div").live().show(); 

複選框代碼：

<li><input type="checkbox" name="comment" />Comment</li> 

實際的功能在那裏我試圖獲取元素：

$("#checkbox_div input:checkbox").click(function() { 
var division = "#" + $(this).attr('name') + "_div"; 
$(division).show(); 
} 

function SetCheckboxes(checkbox_data) { 
    //SetCookie('pre_checkbox', "1111111111111111") 
    var checkbox_data = GetCookie('pre_checkbox'); 
    if (checkbox_data == null) { 
     SetCookie('pre_checkbox', "1111111111111111") 
     checkbox_data = GetCookie('pre_checkbox'); 
    } 

    checkbox_array = new Array("owner", "test_time", "bp", "single_use", "num_of_test", "pause", "clearall", "clearclass", "clearmax", "closeall", "qeinbat", "m_lint","geck","header","comment","feature"); 
    for (i = 0; i < checkbox_data.length; i++) { 
     var checkbox_name = checkbox_array[i]; 
     var value = checkbox_data[i]; 
     var division = "#" + checkbox_name + "_div"; 


     if (checkbox_name=="geck" || checkbox_name=="header" || checkbox_name== "comment" || checkbox_name=="feature"){ 
      console.log("entering_loop_as_expected") 
      if (value == "1") { 
      //alert("1"); 
      $("#checkbox_div input[name='" + checkbox_name + "']").attr("checked", "checked"); 

      $(division).show(); 


     } else { 


      $(division).hide(); 
     } 
        continue; 

      } 

請幫我出這一點。謝謝！

Answer 1

你錯過了quotes，也確保您嘗試訪問他們，他們被添加到DOM之前，e.g如果他們在某些按鈕點擊加入，他們將無法使用DOM的準備。我想你忘了給身份證的價值，我做了一個現場演示。

Live Demo

$("#checkbox_div input:checkbox").click(function() { 
var division = "#" + $(this).attr('name') + "_div";  
$(division).show(); 
}); 

id=1; 
$("#description_div").append('<table class="des_box1" id="comment_div"><tr><td class="head" id="file_comments"> The function comments </td></tr><tr><td class="comment" id="test_point_comment_info_' + id + '"></td></tr> </table>'); 

編輯根據意見和小提琴提供。

您在演示

1. 你的HTML與TD，而不是表
2. 開始與HTML幾個問題你不加引號
3. 你是一個以上的分配相同的ID圍住IDS元素，而是分配一個 公共類並使用它。

​​，這裏問題不是動態的元素，但錯誤的HTML /腳本

的Html

<table> 
    <tr> 
     <td valign="top" id="description_div"> 
      <table class="des_box" id="comment_div1"> 
       <tr> 
        <td class="head" id="file_comments">The function commentszz</td> 
       </tr> 
       <tr> 
        <td class="comment" id="test_point_comment_info"></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
<div id="checkbox_div"> 
    <input type="checkbox" name="des" />Comment 
</div> 

的Javascript

$("#description_div").append(
    '<table class="des_box" id="comment_div2"><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + 'id' + '></td></tr> </table>'); 

$(document).on("click", "#checkbox_div input:checkbox", function() { 
    var division = "." + $(this).attr('name') + "_box"; 
    $(division).show(); 
}); 

如果您必須使用相同的ID爲多個元素與錯誤您可以使用屬性選擇器。首先通過在tr和table標籤中包含td來糾正html。

Live Demo

$(document).on("click", "#checkbox_div input:checkbox", function(){ 
    var division = "[id=" + $(this).attr('name') + "_div]"; 
    $(division).show(); 
}); 

Answer 2

什麼是+ id +id值，id是在目前情況下undefined。我已經把它放在單引號中，它的工作正常。

更新：對於靜態和動態內容，您正在使用相同的idcomment_div，id應在DOM中唯一。使用class，而不是id多個元素

Updated jsFiddle

Answer 3

.live()是你想要什麼，但它現在已經貶值，你現在需要使用.on()

$(document).on("click", "#checkbox_div input:checkbox", function(){ 
    //Your code here. 
}); 

使用文檔，以供selector與.on將使你將事件綁定到動態創建的元素。這是我發現在執行之前DOM元素不存在的唯一方法。

我這樣做是動態創建的表是排序能夠和偉大工程。

編輯：

下面是一個例子。點擊該按鈕添加div，然後點擊div以獲取其內容。

http://jsfiddle.net/FEzcC/1/