我正试图在我的网站上实现一个搜索栏。我已经让后端处理正常工作了，我已经为搜索栏准备好了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事件处理程序，当用户在文本栏聚焦时按下回车键或单击搜索按钮时，触发一个名为search的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);
}
目前，当我在文本栏中用光标点击回车键或按下搜索按钮时，什么都不会发生。我知道并不是JavaScript错误阻止了所有东西的执行，因为页面上的所有其他JavaScript都执行得很好。
我知道搜索功能是有效的，并且至少文本输入上的search_fieldid是正确的，因为如果我向按钮添加onclick并通过它调用搜索，它会正确执行，并且总是正确地从文本字段中回显值。
搜索栏在一个单独的头文件中，所以我不必将其包含在每个页面的html中，但这应该没有什么区别，因为我使用PHP包含了该文件，所以它应该在文件到达用户之前就已经就位了。不过，为了以防万一，我已经尝试过使用.bind和document.ready，如您所见，以及.on和匿名包装函数，但都没有成功。
我在控制台中没有收到任何错误消息或任何东西，它只是无声地失败了。我知道这个网站上有很多类似的问题，但我已经尝试了其中十几个的所有解决方案。如果有人知道问题是什么以及如何解决，甚至只是通过额外的测试来帮助找出失败的原因，这样我就可以缩小搜索范围，那将不胜感激。
编辑：Huanism使用我的代码创建了这个JSfiddle，并表明代码运行正常，所以我的网站的上下文一定有问题导致它无法运行。
Fiddle-http://jsfiddle.net/3m5Mp/
我在你的问题上加了一把小提琴。您应该将#search_field处理程序移到文档就绪的内部。在fiddle中，它之所以有效，是因为它已经假设文档准备好了。咔嗒声对我来说很管用。你在哪个浏览器上测试？
输入
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"后的逗号
请改用event.which。我也不能100%确定，但你可能想试试.keydown或.keypress。我在我的一个网站上看到了一些JS代码，我在那里陷阱输入键，我只使用这两个。我记得.keyup在某些方面遇到了麻烦。