获取附加文本区域的值

Question

我用按钮附加一个文本区域

$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");

之后，我将新文本写入 textarea 并尝试使用此 on click 功能从 textarea 中获取新写入的值；

jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
  });

但它说这是一个“空字符串”，如果我添加具有 <textarea id="myTextarea">some text</textarea> 之类的值的文本区域，我的功能可以工作并给我“一些文本”但是如果我编辑 textarea 并单击 sendReply 按钮（我的点击功能），它仍然给我“一些文字”，它不会改变

追加文本区域后如何获取编辑后的文本区域值？

Answer 1

在附加 HTML 时，您在 .sendReply 中有一个 .

您只需从.sendReply 中删除.

使用

<div class='sendReply btn btn-default'>my button</div>"

当您使用事件委托时，您的 jQuery 将正常工作。

当您多次添加具有相同 ID 的 textarea 时？$("#myTextarea").val() 将始终显示 ID 为 myTextarea 的第一个 textarea 的值。可以使用一个通用类，然后使用prev()选择textarea

查看示例

$(document).ready(function() {

  $(document).on('click', '.sendReply', function() {
    var myNewText = $(this).prev(".myTextarea").val();
    alert(myNewText);
  });
  for (var i = 0; i < 5; i++) {
    $(".mydiv").append("<textarea class='myTextarea'>some text</textarea><div class='sendReply btn btn-default'>my button</div>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mydiv'></div>

Answer 2

应该是

$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");

然后

jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
  });

不要使用点（.）作为类名..

Answer 3

而不是使用 div .. 使用一些标准来编码 .. 你可以让它有按钮 .. 这是代码

<div class="mydiv"></div>

$(".mydiv").append("<textarea id='myTextarea'></textarea><input type='button' class='sendReply btn btn-default' value='my button'></input>");
jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
    alert(myNewText);
  });

JSFIDDLE