未定义 DOM 加载后文本框值

Question

这很奇怪。我的 .val（） 和 .html（） 总是未定义的，尽管我在页面上加载所有内容后使用它。另外，.text（） 是空的。

<div class="row col-md-12">
<div class="row col-md-12">
    <label id="lblDir" style="width:auto">Scripts Directory Path: <input type="text" id="txturl"></label>
</div>
<div class="row col-md-12">
    <div id="grid" style="border:dashed"></div>
</div>
<div class="row col-md-12">
    <input id="btnRun" type="button" value="Run Scripts" style="margin:5px" />
</div>
<div class="row col-md-12">
    <label id="result"></label>
</div>
</div>
<script>
$(function () {
    $("#btnRun").kendoButton();
    $("#btnRun").on("click", function (e) {
        alert($('#txtUrl').text());
    });
});

我尝试过的事情1. 将脚本标签放在div 标签之前2. 在按钮 HTML 中添加点击功能

<input id="btnRun" type="button" value="Run Scripts" onclick="onInstall();" style="margin:5px" />

结果是一样的

Answer 1

正如 Løvbo Andersen @Carsten提到的，你需要使用 $('#txturl').val() 而不是 $('#txtUrl').text()，因为：

• #txtUrl不存在。CSS 类和 jQuery 选择器通常是大小写感知的。（大小写不敏感不是很好支持。
• input元素没有.text()，而是.val()。

$(function () {
    $("#btnRun").on("click", function (e) {
        alert($('#txturl').val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row col-md-12">
<div class="row col-md-12">
    <label id="lblDir" style="width:auto">Scripts Directory Path: <input type="text" id="txturl"></label>
</div>
<div class="row col-md-12">
    <div id="grid" style="border:dashed"></div>
</div>
<div class="row col-md-12">
    <input id="btnRun" type="button" value="Run Scripts" style="margin:5px" />
</div>
<div class="row col-md-12">
    <label id="result"></label>
</div>
</div>

Answer 2

您必须保持 HTML 标记中的 id 和脚本中的 id 值相同。id 值区分大小写。

在你的html标记中，

输入类型的ID是"txturl"，但在js中它是"txtUrl"。同时制作"txturl"或"txtUrl"，然后它应该可以正常工作。