.val 没有给我元素的价值答案

【问题标题】：.val is not giving me the value of my element.val 没有给我元素的价值
【发布时间】：2013-07-13 23:56:39
【问题描述】：

我正在使用 reddit API。我的页面上有一个搜索框，我正在尝试对其进行设置，以便如果要输入几乎任何内容，它将返回与他们输入的单词或短语相关的前 10 条新闻报道。

 <script>
    $(document).ready(function () {

       //reddit API URL
       //var URL =  "http://www.reddit.com/r/subreddits/search.json?q=Xbox";

       var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
       var searchQueryText = $('#search').val(); //getSearchQueryText();

       $.getJSON(SEARCH_URL, {
          q: searchQueryText,
          limit: 10
       }).done(function (data) {
           $.each(data.data.children, function (i, item) {
             $("<p>").text(item.data.title).appendTo("#images");
           });
       }).fail(function (data) {
           alert("Something went wrong");
       });

    }); //end ready
 </script>

<div id="images">
<h1>Reddit Data:</h1>

<p>
    <label>Search</label>
    <input type = "text" id = "search" value = "" />
</p>

如果我将 var SearchQueryText 更改为特定的单词，那么 API 就可以正常工作。但是，自从我将其更改为 $('#search').val(); 后，它不再起作用。我放了一个alert() 来测试这个值，弹出窗口是空白的。所以我认为问题是当我输入它时它没有检测到这个词。所以我写了一个简单的.mouseenter 函数，还是什么都没有。有什么想法吗？

【问题讨论】：

您在输入任何内容之前都会获取文本框的值。
我怀疑。那么我是否需要编写一个函数让 var searchQueryText 在我编写后获取它？

标签： jquery ajax api reddit

【解决方案1】：

尝试附加 keyup 事件处理程序

这将在用户释放密钥时触发。

$('#search').keyup(function() {
    console.log(this.value)
}).change();

如果你想在文档准备好时触发相同的事件，那么你可以在声明之后链接事件。

$(document).ready(function () {

    $('#search').keyup(function () {
        //reddit API URL
        //var URL =  "http://www.reddit.com/r/subreddits/search.json?q=Xbox";

        var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
        var searchQueryText = this.value;  // or  $(this).val(()

        $.getJSON(SEARCH_URL, {
            q: searchQueryText,
            limit: 10
        }).done(function (data) {
            $.each(data.data.children, function (i, item) {
                $("<p>").text(item.data.title).appendTo("#images");

            });
        }).fail(function (data) {
            alert("Something went wrong");
        });
    }).keyup();
}); //end ready

【讨论】：

你的意思是 set var searchQueryText = $('#search').change(function() { console.log(this.value) });对吗？
对不起，我有点菜鸟。你的意思是把所有东西都放进去，因为这对我来说没有意义吗？
基本上你想在用户每次在搜索栏中输入内容时发送一个请求。您编写的代码只会在页面加载时执行一次。但是将其封装在事件处理程序中将确保在文本更改时发送请求并获取新数据
它检索到了信息，但也引起了问题。例如，它并没有停止在我设置的 10 的限制。我试图做一个点击方法，但我无法让它工作。有人告诉我这是更简单的方法，所以我会再试一次。
而只是将相同的内容封装在一个点击事件中。尝试创建一个按钮元素并将事件分配给它

【解决方案2】：

或者，您可以在用户按下回车键（即输入一些文本后）时触发事件，如下所示：

$(document).ready(function () {
  $('#search').keypress(function(e) {
     if(e.which == 13) {
       // Enter key pressed
       e.preventDefault();
       var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
       var searchQueryText = $('#search').val(); //getSearchQueryText();
       console.log(searchQueryText);

       $.getJSON(SEARCH_URL, {
          q: searchQueryText,
          limit: 10
       }).done(function (data) {
          $.each(data.data.children, function (i, item) {
          $("<p>").text(item.data.title).appendTo("#images");
          });
       }).fail(function (data) {
         alert("Something went wrong");
       });   
     }
  }); // End keypress handler
}); // End ready

【讨论】：