Не могу найти правильный селектор для JQuery формы нажмите

Question

Это очень простой вопрос.Я создаю веб-сайт, используя API пользовательского поиска Google для отображения результатов поиска на моей странице.По умолчанию Google отображает окно результатов поиска на странице (без каких-либо фактических результатов) всегда, и список заполняется, когда пользователь нажимает кнопку поиска.Моя цель - скрыть окно результатов поиска и отобразить его с помощью jquery, когда пользователь нажимает кнопку поиска.

Здесь вы можете увидеть демо , но я настроил его, когданажмите на логотип (вверху слева), результаты Div показывает.Кажется, я не могу определить правильный селектор для запуска показа по клику. Мне также нужно, чтобы div показывал, когда в поле поиска нажимается «enter».Вот мой простой jquery:

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


         });

    });

Мне нужно заменить логотип a на соответствующий селектор, который будет показывать cse div при нажатии.Вы можете увидеть кнопку ввода в правом верхнем углу страницы.Помогите !!!

Answer 1

Используйте этот селектор:

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

Примечание. Лучше всего было бы присвоить ему идентификатор, но без изменения любого 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);

Answer 2

В прошлом я использовал Selector Detector и SelectorGadget для определения сложных селекторов. Не уверен, решит ли это вашу проблему, но стоит попробовать.

Я только что написал статью, сравнивающую две, которые включают демонстрации и ссылки для скачивания. Если вы хотите узнать больше, проверьте это здесь: http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/