Question

我正在建立一个网站，我在其中使用标签显示不同的聊天记录。每个标签我有一个动态创建的textarea，用户可以在其中键入他的消息并点击发送按钮。当我打开第一个选项卡时，插入文本并点击发送按钮工作正常。然而，当我打开第二个标签时，我似乎无法再从textarea加载文本。

我创建新标签的功能如下所示：

function addTab(user_id, name) {
    $('#pageTab').append(
        $('<li><a href="#' + user_id + '">' + user_id + name +
            '<button class="close" type="button">×</button></a></li>'));
    $('#pageTabContent').append($('<div class="tab-pane" id="' + user_id 
        +'"><form id="send_message_form"><textarea id="messageText" rows="3" cols="35"></textarea></br>'
        + '<input type="button" id="sendButton" value="Send Message"></form>'
        + '<div class="conversation"></div></div>'));
    $('#page' + user_id).tab('show');
}

并使用以下代码尝试读取textarea的值。

$(".response_wrapper").on("click", "#sendButton", function() {
    var text = $("#messageText").val(); // Get the text
    alert("thetext: " + text);
});

有人知道为什么它可以在第一个创建的标签中获得textarea的值，而不是第二个？最重要的是;我该如何解决这个问题？

欢迎任何提示！

Answer 1

您的问题很可能是因为生成了多个具有相同id属性的textareas和按钮。 id属性对所有Web元素都是唯一的。我建议进行一些修改，以便在元素上有唯一的ID，并附加到您生成的每个文本区域。如果你不想在创建它们时附加到每个元素，你可能会尝试这样的事情：

$(".response_wrapper").on("click", "button", function() {
    var text = $(this).prev('textarea').val(); // Get the text
    alert("thetext: " + text);
});

上面的代码一般会附加到按钮，而不是具有特定ID的按钮。这应该有效，尽管它可能会导致页面上每个按钮的执行;你最好的选择是每次创建和附加一个新元素时附加。注意：如果您确实选择使用此代码，则仍应考虑在元素上使用唯一ID。或者，使用此代码，您不需要ID。

如何获得第二次创建的textarea的价值？

1 个答案: