1

我正在尝试在我的网站上实现搜索栏。我已经让后端处理正常工作，并且我已经为搜索栏准备了 html 和 css，我剩下要做的就是让我的 javascript 触发搜索执行。这是搜索栏的html：

<div id="search_field_container">
    <input type="text" name="search_field" id="search_field" maxlength="100" placeholder="Search by item name or #tag" value="Search by item name or #tag" onclick="value=''" />
    <button id="search" name="search_button">s</button>
</div>

我想要做的是设置 jquery 事件处理程序来触发一个称为搜索的 JavaScript 函数，当用户在文本栏获得焦点时按下回车键或单击搜索按钮时。但是，我似乎绝对无法触发事件处理程序。这是我的javascript：

//Search function
$(document).ready(function(){
    console.log("In anonymous function.");
    $("#search").on('click', function(event){
        alert("In click handler");
        search();
    });
});

$("#search_field").bind('keyup', function(event){
    alert("In keyup handler");
    if(event.keyCode == 13){
        alert("In enter handler");
        search();
    }
});

function search(){
    alert("Something happened!");
    var searchTerm = $("#search_field").val();
    alert("You're trying to search for "+searchTerm);
}

目前，当我在文本栏中使用光标按 Enter 或按搜索按钮时，什么都没有发生。我知道这不是阻止执行所有内容的 javascript 错误，因为页面上的所有其他 javascript 都可以正常执行。

我知道搜索功能有效，并且至少search_field文本输入上的 id 是正确的，因为如果我将一个添加onclick到按钮并通过它调用搜索，它会正确执行并且它总是正确地回显来自文本字段的值。

搜索栏位于一个单独的头文件中，因此我不必将其包含在每个页面的 html 中，但这应该没有什么不同，因为我将文件包含在 PHP 中，所以它应该已经到位在文件甚至到达用户之前。以防万一，我已经尝试过使用.bindanddocument.ready如您所见，以及.on匿名包装函数，但无济于事。

我没有在控制台或任何东西中收到任何错误消息，它只是默默地失败。我知道这个网站上有很多类似的问题，但我已经尝试了我能找到的所有解决方案来解决其中的十几个问题。如果有人知道问题是什么以及如何解决它，或者甚至只是额外的测试来帮助找出失败的原因，以便我可以缩小搜索范围，那将不胜感激。

编辑：Huangism 使用我的代码创建了这个 JSfiddle，并表明该代码可以正常工作，所以我的网站的上下文肯定有一些东西导致它无法运行。

小提琴 - http://jsfiddle.net/3m5Mp/

4

2 回答 2

2

我为你的问题添加了一个小提琴。您应该将 #search_field 处理程序移动到准备好的文档中。在小提琴中它可以工作，因为它已经假设文档准备好了。点击在小提琴中对我有用。你在哪个浏览器上测试？

对于输入

code= (e.keyCode ? e.keyCode : e.which);
if (code == 13) alert('Enter key was pressed.');

从另一个问题得到这个

这是一个处理程序的小提琴，所有的处理程序都准备好了，而不是假设文档准备好了

http://jsfiddle.net/PFcnx/2/

FF好像可以，请在其他浏览器中测试看看是否可以

您的 js 错误可能与末尾的额外逗号有关

  $("#grid").masonry({
    itemSelector : '.entry', 
    isFitWidth : 'true',
    isResizable : 'true',   
  });

删除最后一个 'true' 后的逗号

于 2012-10-05T14:31:14.697 回答
1

改为使用event.which。我也不是 100% 确定，但你可能想尝试.keydown一下.keypress。我正在我的网站上查看一些 JS 代码，我在其中捕获输入按键，我只使用这两个。我记得在一些事情上遇到了麻烦.keyup。

于 2012-10-05T14:19:27.227 回答