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)