jquery - 无法为 jquery 表单单击找到正确的选择器

Question

这是一个非常基本的问题。我正在使用 google 自定义搜索 api 构建一个网站，以在我的页面上显示搜索结果。默认情况下，谷歌始终在页面上显示搜索结果框(没有任何实际结果)，当用户单击搜索按钮时会填充列表。我的目标是隐藏搜索结果框，并在用户单击搜索按钮时使用 jquery 显示它。

你可以看到一个演示here但我将其设置为当您单击 Logo (左上角)时，结果 div 会显示。我似乎无法找出正确的选择器来触发点击显示。我还需要在搜索字段上按下“输入”时显示 div。这是我的简单 jquery:

$(document).ready(function(){
            alert($('input.gsc-search-button').length);
            $('input.gsc-search-button').click(function(){
            $('#cse').show(500);


         });

    });

我需要用适当的选择器替换 Logo a，以便在点击时显示 cse div。您可以在页面右上角看到搜索输入按钮。帮忙!!!

Answer 1

使用这个选择器:

$(function() {
  $('input.gsc-search-button').click(function(){ 
     $('#cse').show(500);
  });
});

注意:给它一个 ID 是一个更好的方法，但在不更改任何 html 的情况下，上面的选择器也可以工作。

更新

看起来是 google 造成了麻烦，清除您正在创建的事件，将连接放在他们的处理程序中，这样它就可以工作了:

google.setOnLoadCallback(function(){
  var customSearchControl = new google.search.CustomSearchControl('012390824037940683019:gxvww9wrolu');
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setSearchFormRoot('cse-search-form');
  customSearchControl.draw('cse', options);
  $('input.gsc-search-button').click(function(){ 
    $('#cse').show(500);
  });
}, true);