javascript - jQuery 事件处理程序未在搜索栏上触发

Question

我正在尝试在我的网站上实现一个搜索栏。我已经让后端处理正常工作，并且我已经为搜索栏准备好了 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);
}

目前，当我用文本栏中的光标按回车键或按搜索按钮时，没有任何反应。我知道不是 JavaScript 错误阻止了所有操作的执行，因为页面上的所有其他 JavaScript 都执行得非常好。

我知道搜索功能有效，并且文本输入中的至少 search_field id 是正确的，因为如果我向按钮添加 onclick 并调用搜索也就是说，它会正确执行，并且始终正确地回显文本字段中的值。

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

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

编辑:Huangism 使用我的代码创建了这个 JSfiddle，并显示代码可以正常工作，所以一定是我网站的上下文导致它无法运行。

fiddle - http://jsfiddle.net/3m5Mp/

Answer 1

我在你的问题中添加了一个 fiddle 。您应该将 #search_field 处理程序移到 doc 准备就绪的内部。在 fiddle 中它起作用是因为它已经假设文档准备就绪。点击在 fiddle 中对我有用。您在哪个浏览器上进行测试？

输入

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

从另一个问题中得到的

这是一个 fiddle ，所有的处理程序都在 doc ready 中，而不是假设 doc ready

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

在FF中似乎可以，请在其他浏览器中测试一下是否可以

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

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

去掉最后一个'true'后面的逗号