javascript - $ ("#myTextArea").val() 返回空字符串

Question

我遇到一个问题，我的 textarea 值返回一个空字符串。我有一个模式，它在 dblclick 事件上打开，其中有一个文本区域和一个按钮。我希望当单击按钮时，文本区域中写入的文本被提取并存储在一个变量中以供其他函数使用。顺便说一下，当我点击按钮时，返回的文本是“”。

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"> 专门来防止这个问题......)

以这种方式定义模式的问题在于"template"内容本身就是文档的一部分，即使“基础”内容从未显示过。然后模态插件可以调用 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 的问题。