javascript - JQuery val() 返回空

Question

我被困在看似微不足道的问题上，我可能会因为错过这个而自责......无论如何，我的问题是我无法从文本字段中获取值。

HTML:

<form>
        <label for="">Enter Username:</label>
        <input id="usernameText" type="text" size="30" />
        &nbsp;&nbsp;<input type="button" value="Generate" onclick="generateQuery(); return     false;" />
</form>

Javascript:

<script type="text/javascript">

        var username = $("#usernameText").val();

        function generateQuery(){

            alert(username);

        }
</script>

我执行了以下 if (jQuery) {.. 并确保加载了 JQuery。

在警报中它显示一个空对话框。

如果我将 $(document).ready(); 包含到我的脚本中，则不会调用函数 generateQuery。知道为什么……吗？

<script type="text/javascript">

    $(document).ready(function(){
        var username = $("#usernameText").val();

        function generateQuery(){

            alert(username);

        }
    });     
</script>

Answer 1

在函数内分配您的变量。

function generateQuery(){
  var username = $("#usernameText").val();
  alert(username);
}

关于您的其他问题，“如果我将 $(document).ready(); 包含在我的脚本中，则不会调用生成函数。知道为什么……吗？”

发生这种情况是因为范围。你包裹generateQuery添加 document.ready 时在匿名函数中处理程序，因此它对您的 button onclick="generateQuery()" 不可见代码。