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

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

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

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


         });

    });

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


api jquery css jquery-selectors
person JCHASE11    schedule 30.01.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

$(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);
person Nick Craver    schedule 30.01.2010
comment
@JJCHASE11: Какой браузер? Здесь он работает в хроме... всегда должен работать. - Также сделайте, как сказал Балус, для этого все еще нужен document.ready ... Я обновлю, чтобы сделать это яснее. - person Nick Craver; 30.01.2010
comment
@JCHASE11: Попробуйте alert($('input.gsc-search-button').length);, каков результат? - person Nick Craver; 30.01.2010
comment
Спасибо, Ник. Я пытаюсь в firefox и не повезло. Я также пробовал это в хроме без везения. Как бы я использовал этот код (новичок js) - person JCHASE11; 30.01.2010
comment
@JCHASE11: Просто вставьте его в готовый документ: <script type="text/javascript">$(function() {alert($('input.gsc-search-button').length); });</script> - person Nick Craver; 30.01.2010
comment
Я обновил свой скрипт выше. Это правильно? Это не исправляет это - он просто дает мне всплывающее окно javascript при загрузке страницы, которое отображает значение 0 - person JCHASE11; 30.01.2010
comment
я предполагаю, что это означает, что длина div равна 0, поэтому селектор не работает, потому что у него нет реальной области - person JCHASE11; 30.01.2010
comment
@ JCHASE11: Это тот же html, что и страница, на которую вы ссылаетесь? Выполнение любого из этих действий на странице, на которую вы ссылаетесь, работает в Firefox и Chrome здесь ... вы тестируете что-то еще? Вы делаете то, что происходит, когда вы нажимаете кнопку «Поиск» вверху, верно? (Чтобы ответить на ваш предыдущий: он имеет длину 0, потому что селектор не соответствует ни одному элементу) - person Nick Craver; 30.01.2010
comment
Хм, странно, что он у вас работает. Мне здесь не повезло, и я использую те же файлы, что и вы. Я хочу, чтобы это произошло при нажатии кнопки поиска, да. Я загружаю новые (точные) файлы, в которые я вношу изменения со всеми новыми изменениями, и дайте мне знать, работает ли это для вас, потому что это не для меня. БЛАГОДАРНОСТЬ! - person JCHASE11; 30.01.2010
comment
если предупреждение сообщило нам, что селектор не соответствует ни одному элементу, не означает ли это, что селектор не будет работать? - person JCHASE11; 30.01.2010
comment
@JCHASE11: Посмотрите на мой ответ еще раз ... это обработчик Google вызывает проблемы, размещение обработчика кликов там исправляет это ... до того, как обработчик кликов Google стер тот, который вы делали, поместив его после того, как они подключили свои. заставляет это работать. Можете ли вы отредактировать часть Google, или это не работающее решение? - person Nick Craver; 30.01.2010
comment
это работает отлично. Я также сделал то же самое на x, чтобы удалить div. Большое спасибо, Ник! - person JCHASE11; 30.01.2010

arrow_upward
1
arrow_downward

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

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

person Chris Heinen    schedule 15.03.2010