jQuery.append（）文本区域到div的.val（）未定义

这个怎么了

<button id='myButton'>Click me</button>

<p>Borken</p>
<div id='RS_msgBox'></div>

<hr />


<!-- This is the control. The structure is exactly the same as when after 
     the JS gets done .appending to #RS_msgBox -->

<p>Works</p>
<div id='RS_msgBox2'>
    <div id='RS_msgs2'>
        <textarea id='RS_text2' cols=50 rows=5>
            I was here before any JS affected me.
        </textarea>
    </div>
</div>


jQuery('#myButton').click(function () {

    var msgDiv  = jQuery("#RS_text"),
        msgDiv2 = jQuery("#RS_text2"),
        logOne  = '\nI am the first log entry. ',
        logTwo  = "\nHey, where is the first entry? ";

    jQuery("#RS_msgBox").append("<div id='RS_msgs'><textarea id='RS_text' cols=50 rows=5>I was via JS append().</textarea></div>");

    // Experiment
    console.log('Before:'+msgDiv.val());
    msgDiv.val(msgDiv.val()+logOne); // Doesn't work because msgDiv.val() is undefined at this point.  But why?? I 'defined' it when I .append()ed it, didn't I?
    console.log('After:'+msgDiv.val());

    // Control
    msgDiv2.val(msgDiv2.val()+logOne);

    // Appending further text still fails whether we call another function or not.
    anotherFunc(logTwo);
});

function anotherFunc(newText) {
    var msgDiv = jQuery("textarea#RS_text"),
        msgDiv2 = jQuery("textarea#RS_text2");

    msgDiv.val(msgDiv.val()+newText);
    msgDiv2.val(msgDiv2.val()+newText);
}

点击我
博肯


工作

在任何JS影响我之前我就在这里了。
jQuery（“#myButton”）。单击（函数（）{
var msgDiv=jQuery（“#RS#u text”），
msgDiv2=jQuery（“#RS#text2”），
logOne='\n我是第一个日志项'，
logTwo=“\n嘿，第一个条目在哪里？”；
jQuery（“#RS#msgBox”）.append（“我是通过JS append（）”）；
//实验
log（'Before:'+msgDiv.val（））；
msgDiv.val（msgDiv.val（）+logOne）；//不起作用，因为msgDiv.val（）此时未定义。但为什么？我在.append（）对其进行修改时“定义”了它，不是吗？
log（'After:'+msgDiv.val（））；
//控制
msgDiv2.val（msgDiv2.val（）+logOne）；
//无论是否调用另一个函数，追加更多文本仍然失败。
另一个函数（logTwo）；
});
函数anotherFunc（newText）{
var msgDiv=jQuery（“textarea#RS#text”），
msgDiv2=jQuery（“textarea#RS#u text2”）；
msgDiv.val（msgDiv.val（）+newText）；
msgDiv2.val（msgDiv2.val（）+newText）；
}

tl；dr：为什么我不能将

.append（）

a

添加到

并立即将

.val（logOne）

设置为它？更重要的是，如何修复/解决

--

我在上找到了答案，几乎可以回答我的问题，但没有一个真正解释为什么最近创建的

没有附加，或者如何解决它

换句话说，我确信这是一个重复的问题，但我还没有找到一个答案来回答我的两个问题（为什么？&如何？）

我猜浏览器需要一点时间将

.append（）

的

添加到DOM中，并且代码是异步工作的。换句话说，代码只是“跳过”设置

.val（logOne）

，因为

#RS_text

还没有准备好（没有抛出、捕获或处理错误），它只是继续将

.val（logTwo）

设置为

#RS_text2

有人知道这听起来是否接近正确吗

---

最后，我想更重要的是如何解决这个问题。目标是创建一个文本区域，其唯一目的是接收来自其余javascript的注释/日志条目（通过node和socket.io）。当创建了

并向其发送了一个新的日志条目时，此代码在第二次运行。

第一个问题是生成

msgDiv  = jQuery("#RS_text"),

在追加之前，在它还不存在的时候，集合是空的。将初始化放在文本区域的附加之后

---

另一个问题是，您创建了多个具有相同ID的元素。

我得到了相同的结论：）在提供的代码中很容易发现错误，但我不确定目标是什么。我这样做：这就是问题所在，jQuery试图找到提供的id，但找不到。用这个答案编辑原始的JSFIDLE解决了这个问题啊，谢谢！我相信那就行了。多ID问题只出现在我的示例代码中。