jquery - 动态文本区域值卡在空白处

Question

使用 jquery 动态生成 textarea 后，我尝试获取此 textarea 的值并记录它，这在我第一次尝试时有效，但第二次、第三次等时，值被卡在空白处。我不确定为什么，但它唯一一次为这个 textarea 获得新值是当我刷新页面时。

$(document).on('click','.messager',function(e){
        e.preventDefault();
        $('body').append("<div class='messageSender'>"
                +"<div class='colr' id='content'>"
                        +"<button id='modal-close'>Close Window</button>"
                        +"<button id='modal-send'>Send Message</button><br /><br /><br />"
                        +"<label for='messageUser'><font size='5'>Message:</font></label>"
                        +"<textarea id='messageUser' maxlength='1400'> </textarea>"
                    +"</div></div>");
 });

我尝试记录值的地方

$(document).on('click','#modal-send',function(e){
    e.preventDefault();
    var msg = $("#messageUser").val();
    console.log(msg);


            $.post("sendMessage.php", { request: "sendMsg"},
            function(data) { 
                                $("#messageUser").val("");
                                $(".messageSender").hide();
                                $(".modal").hide();
                            alert("Message Sent Successfully")  
            });
    return false;   
});

Answer 1

事实证明这是markpsmith提到的某种“绑定问题”。发送消息后，我必须使用 .remove() 方法完全删除 div 和 textarea ，否则消息值将停留在设置为它的初始值上，因为每次单击发送消息时都会附加一个新的 textarea 。

           $(document).on('click','#modal-send',function(e){
e.preventDefault();
var msg = $("#messageUser").val();
console.log(msg);


        $.post("sendMessage.php", { request: "sendMsg"},
        function(data) { 
                            $("#messageUser").remove();
                                $(".messageSender").remove();
                                $("#content").remove();
                        alert("Message Sent Successfully")  
        });
return false;   

});