jQuery - 如何動態地將元素添加到DOM？

Question

我輸出幾個textareas頁面。 textareas有一類「Expandable」。我曾經在HTML代碼中的每一個Expandable textareas之後輸出一個div。

硬編碼：

<textarea id="NewContent" class="Expandable"></textarea> 
<div class="Count"></div> 

我想改變這種狀況，使jQuery的經歷和發現的每一個可擴展的textarea和後插入我的伯爵DIV權。要做到這一點，我使用此代碼：

$(".Expandable").each(function() { 
    $(this).after("<div class='Count'></div>"); 
}); 

這給了我我需要的東西。但是...因爲它在創建後添加到頁面中，所以div不會被添加到DOM中。我需要這樣的事情發生。

我知道我需要使用「活」，我成功地在其他地方使用它，但我似乎無法得到這個工作。

$(".Count").live(); 

計數div將用於顯示上面的textarea的字符數。不會發生用戶交互，如鍵入或模糊。我沒有包含這個代碼，因爲它完美的工作。

EDITED

$(".Expandable").change(function() { 
    $(this).parent().next(".Count").html("Sunday"); 
}); 

當你鍵入的文本區域，在下一個計數DIV應顯示 「星期天」。這與硬編碼的Count div完美配合，但不適用於動態生成的Count div。

我已對此作了小提琴：http://jsfiddle.net/EvikJames/qyuQS/2/

Answer 1

的問題是不是靜態VS動態元素......他們都在DOM您.after()執行之後。問題是定位在這裏，在原始代碼：

$(this).parent().next(".Count").html("Sunday"); 

這是有喜歡你的靜態版本的結構工作：

<div><textarea id="NewContent" class="Expandable"></textarea></div> 
<div class="Count"></div> 

然而，這不是創建：

$(".Expandable").each(function() { 
    $(this).after("<div class='Count'></div>"); 
}); 

以上插入新的<div>作爲它的元素的兄弟後插入，所以.after()意味着後立即，創建此：

<div> 
    <textarea id="NewContent" class="Expandable"></textarea> 
    <div class="Count"></div> 
</div> 

有了這個結構，你根本不需要那麼.parent()調用，它應該僅僅是：

$(this).next(".Count").html("Sunday"); 

You can test it out here。

---

順便說一句，.after()作品上的多個元素，它可以是簡單的像我上面的例子：當你使用'。經過（）

$(".Expandable").after("<div class='Count'></div>"); 

Answer 2

我用你的代碼做了的jsfiddle：

http://jsfiddle.net/jeffreydev/qyuQS/

伯爵元素越來越增加，也許你應該添加一些CSS來使他們出現？

編輯：

還是你的意思，你添加的可擴展的textarea對你的DOM？並想在他們下面添加計數？

如果是的話，我會做它像這樣：

http://jsfiddle.net/jeffreydev/qyuQS/1/

再次編輯：

正如別人的答案解釋，爲了改變一個元素中的HTML確保您指定的dom結構中的右元素。

這裏是一個工作示例：http://jsfiddle.net/jeffreydev/qyuQS/12/

$(this).parent().next().html('Sunday'); 

釋：

$(this) // get the current element as a jquery object (the textarea). 
$(this).parent() // get the selected elements parent (the textarea's parent, the div) 
$(this).parent().next() // and get the element that is next to it in the dom structure (which is the .Count element)