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事件处理程序以在用户在文本栏聚焦时或在单击搜索按钮时按Enter键时触发称为搜索的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并显示代码正常工作，所以必须有一些关于我的网站上下文导致它不起作用的东西。

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

Answer 1

我在你的问题中添加了一个小提琴。你应该在doc ready中移动#search_field处理程序。在小提琴中它起作用，因为它已经准备好doc。点击对我来说是小提琴。您正在测试哪种浏览器？

输入

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

从另一个问题得到这个

这是一个小提琴，处理程序全部在doc准备就绪，而不是假设doc准备好了

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

它似乎在FF中工作，请在其他浏览器中测试并查看它是否有效

你的js错误可能与最后的额外逗号有关

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

在最后一次'true'

之后删除逗号

Answer 2

请改用event.which。我也不是百分百肯定，但你可能想尝试.keydown或.keypress。我在我的网站上查看一些JS代码，我在其中捕获输入按键，我只使用这两个。我记得.keyup遇到了一些问题。

jQuery事件处理程序不会在搜索栏上触发

2 个答案: