$（“＃myTextArea”）。val（）返回一个空字符串

Question

我有一个问题，我的textarea值返回一个空字符串。 我有一个模态，它在dblclick事件上打开，其中有一个textarea和一个按钮。 我希望当单击该按钮时，将获取在textarea中写入的文本并将其存储在变量中以用于其他功能。 顺便说一句，当我点击按钮时，返回的文本是“”。

textarea html是：

<textarea id="text-comment" placeholder="Insert a new comment" style="min-width:100%"></textarea>

按钮html是：

<button class="btn btn-default" data-dismiss="modal" id="edit">Edit</button>`

功能代码是：

$(document).on('click', '#edit', function(){    //edits the selected note
    var classes = $(selectedNote).attr("class").toString().split(' ');
    var id = classes[2];
    var newText = $("#text-comment").val();
    console.log("new text is: "+newText);
    $(selectedNote).attr("title", newText);
    for(var i = 0; i < temporaryNotes.length; i++) {
        if(temporaryNotes[i]["ref"] == id) {
            temporaryNotes[i]["text"] = newText;
        }
    }
    for(var i = 0; i < notes.length; i++) {
        if(notes[i]["ref"] == id) {
            deleteNotes.push(notes[i]);
            notes[i]["text"] = newText;
        }
    }
})

Answer 1

我要去这里。 肢体可能会破裂，但谁知道呢？

我相信你的模态的内容是在HTML本身内定义的。 也许你有<div class="modal-content">或者什么 - 我不知道你正在使用什么模态插件（但如果我写过一个，它将特别使用<script type="text/html">防止这个问题...）

以这种方式定义模态的问题是“模板”内容本身是文档的一部分，即使从未显示“基础”内容。 然后，模态插件可以在模板上调用cloneNode并将其渲染为模式。 简单吧？

不完全的。 ID必须在页面上是唯一的，因此任何使用cloneNode呈现的模式插件最终都会在整个地方出现重复的ID。

要查明是否是这种情况，请尝试在屏幕上显示模态时运行此代码：

alert($("[id='text-comment']").length);

这将显示有多少元素具有该ID（而#text-comment可能在第一个之后停止）。 该值应该恰好为1 。 如果它是2 （或更糟，更多！）那么你确实有一个严重实现的模态插件。

如果不确切知道你正在使用哪个插件或它是如何工作的，我建议找一些方法来唯一地识别显示的模态而不是模板，并且不要在模板中使用ID。

您需要使用浏览器的开发者工具来执行此操作，但作为示例，如果您的模态显示为class="modal-display"那么您可以执行以下操作：

var button = $(this),
    container = button.closest(".modal-display"),
    textarea = container.find("textarea"),
    value = textarea.val();

这种对元素的“相对搜索”更灵活，它将在未来帮助你学习这类东西。 但就目前而言，它应该解决重复ID的问题。