0

Доброго времени суток, уважаемые коллеги! Битый час мучаюсь со странный поведением обработчика событий у себя на сайте. Сайт сделан на Drupal. Через вьюху вывожу некий контент и форму фильтрации. В фильтрации используется AJAX. Мне нужно отловить каждое нажатие на кнопку поиска. Сначала я написал такой вариант:

$('button[value="Поиск"]').on('click', function(){
    console.log('click');
});

Он срабатывает 1 раз, потом перестаёт работать. Это неудивительно из-за AJAX эта страница формируется заново без перезагрузки и кнопка, соответственно тоже. Потом я решил попробовать такой вариант:

$('body').on('click', 'button[value="Поиск"]',function(){
    console.log('click');
});

Такой вариант вообще не срабатывает ни разу, хотя должен по идеи.

Собственно сам вопрос состоит в том, как мне отловить каждое нажатие по кнопке поиска?

P.S. Вот тут есть ссылка на работающий сейчас скрипт, чтобы можно было самим потыкать и понять причину.

3 ответа 3

0

Попробуйте

$('button[value="Поиск"]').live('click', function(){
    console.log('click');
});
2
  • live является устаревшей функцией и начиная с jQuery 1.9 не работает skrinshoter.ru/s/300317/ixuS1M
    – Ivan
    30 мар 2017 в 8:19
  • Окай( на мой взгляд, jQuery является устаревшей функцией
    – Darth
    30 мар 2017 в 8:35
0

Нашёл решение. Не знаю на сколько это костыль, но всё же работает. Для первого клика я использую стандартный вариант:

$('button[value="Поиск"]').on('click', function(){
    console.log('click');
});

А для всех последующий, после того как обновилась страница с помощью AJAX, использую такую схему:

Drupal.behaviors.map_search = {
    attach: function (context, settings) {
        $('button[value="Поиск"]').once('search', function(){
            $('button[value="Поиск"]').on('click', function(){
                console.log('click');
            }); 
        }); 
    }
};

Это особенность работы AJAX в Drupal.

0

Может так подойдет?:

var currentValue;	
$(document).ready(function(){
  $("select").change(function(){
	$("option").each(function(){
		$(this).removeClass("selected");
	});  
     $("option:selected").addClass("selected");
     var currentValue = $(this).val();
     $("#values").val(currentValue);
	 $("#search").fadeIn(600); 
  });
  
  $("#search").click(function(){
  //Настраиваем ошибку
   if($("#values").val() === "" || $("#values").val() === "empty"){
	$(".cars_selection figure").fadeIn(900);   
    $("#error").text("Ничего не выбрано");}
    
   else {$("#error").text(" ");}
   $("#search").fadeOut(600);  
   //Поиск
  if($("#values").val() === "bugatti"){  
  $(".cars_selection figure").not(".bugatti").fadeOut(900);
  $(".bugatti").fadeIn(500);}	  

  if($("#values").val() === "ferarri"){  
  $(".cars_selection figure").not(".ferarri").fadeOut(900);
  $(".ferarri").fadeIn(500);}	  

  if($("#values").val() === "mitsubishi"){  
  $(".cars_selection figure").not(".mitsubishi").fadeOut(900);
  $(".mitsubishi").fadeIn(500);}	  
	
  if($("#values").val() === "lamborgini"){  
  $(".cars_selection figure").not(".lamborgini").fadeOut(900);
  $(".lamborgini").fadeIn(500);}	  
  });

});
figure {text-align: center; display: inline-block; margin: 5px 8px 0px 2px; border: 1px solid silver; background-color: wheat; width: 190px;}
figure img {width: 170px; margin: 5px; height: 100px;}
figcaption {font-size: 1.2em; color: darkgreen;}
#error {display: block; text-align: left; width: 100%; font-size: 1.15em; color: red;}
.selected {}
#search {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<select id="select_car">
<option value="empty">Выберите машину</option>
<option value="bugatti">Bugatti</option>
<option value="ferarri">Ferarri</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="lamborgini">Lamborgini</option>
</select>
<button id="search" type="button">Поиск</button>
<input type="hidden" id="values" value=""/><br/> <span id="error"></span>
<section class="cars_selection">
<figure class="bugatti">
<img src="http://assets.bugatti.com/fileadmin/user_upload/Web/Pages/Models/Super_Sport/BUG_super_sport_02.jpg" alt="bugatti_veyron"/>
<figcaption>Bugatti Veyron</figcaption>
</figure>

<figure class="bugatti">
<img src="https://topgearrussia.ru/data/topgear/preview/2016-03/01/image-edbbc2b3-980x550.jpg" alt="bugatti_chiron"/>
<figcaption>Bugatti Chiron</figcaption>
</figure>

<figure class="bugatti">
<img src="https://s-media-cache-ak0.pinimg.com/originals/06/a1/71/06a17192e97ae357415d3bdfe23684b7.jpg" alt="bugatti_type57"/>
<figcaption>Bugatti Type 57</figcaption>
</figure>

<figure class="ferarri">
<img src="http://carrrsmag.com/data_images/models/ferrari-f12-berlinetta/ferrari-f12-berlinetta-01.jpg" alt="ferarri_f12"/>
<figcaption>Ferarri F12</figcaption>
</figure>

<figure class="ferarri">
<img src="http://carrrsmag.com/data_images/models/ferrari-enzo/ferrari-enzo-03.jpg" alt="ferarri_enzo"/>
<figcaption>Ferarri Enzo</figcaption>
</figure>

<figure class="ferarri">
<img src="http://www.caranddriver.com/images/16q1/665019/2017-ferrari-california-t-handling-speciale-first-drive-review-car-and-driver-photo-666781-s-429x262.jpg" alt="ferarri_california_t"/>
<figcaption>Ferarri California T</figcaption>
</figure>

<figure class="mitsubishi">
<img src="http://a2goos.com/data_images/models/mitsubishi-lancer-evolution-x/mitsubishi-lancer-evolution-x-09.jpg" alt="mitsubishi_lancer_evolution_X"/>
<figcaption>Mitsubishi Lancer Evolution X</figcaption>
</figure>

<figure class="mitsubishi">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/3000gtlev.jpg/300px-3000gtlev.jpg" alt="mitsubishi_3000GT"/>
<figcaption>Mitsubishi 3000gt</figcaption>
</figure>

<figure class="mitsubishi">
<img src="http://s.auto.drom.ru/i24207/c/photos/fullsize/mitsubishi/pajero/mitsubishi_pajero_695500.jpg" alt="mitsubishi_pajero"/>
<figcaption>Mitsubishi Pajero</figcaption>
</figure>

<figure class="lamborgini">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6869.jpg" alt="lamborgini_aventador"/>
<figcaption>Lmborgini Aventador</figcaption>
</figure>

<figure class="lamborgini">
<img src="http://o.aolcdn.com/dims-global/dims3/GLOB/legacy_thumbnail/750x422/quality/95/http://www.blogcdn.com/slideshows/images/slides/347/218/0/S3472180/slug/l/01-2015-lamborghini-huracan-review-1.jpg" alt="lamborgini_huracan"/>
<figcaption>Lmborgini Huracan</figcaption>
</figure>

<figure class="lamborgini">
<img src="http://a2goos.com/data_images/galleryes/lamborghini-diablo-sv/lamborghini-diablo-sv-05.jpg" alt="lamborgini_diablo"/>
<figcaption>Lmborgini Diablo</figcaption>
</figure>
</section>

5
  • и чем ваш пример отличается от примера автора вопроса?
    – L. Vadim
    30 мар 2017 в 8:34
  • @L.Vadim Упс, секунду поменяю.
    – Eugen Eray
    30 мар 2017 в 8:36
  • @eugen, проблема в том, что Ваш button не исчезает после клика, а потом снова не появляется. Вот посмотрите внимательно на кнопку по той ссылке, что я привёл в вопросе)
    – Ivan
    30 мар 2017 в 8:46
  • @Ivan Походу я случайно сделал фильтр товаров. Мда (😕)
    – Eugen Eray
    30 мар 2017 в 10:42
  • @eugen, ну Вы, конечно, отжигаете тут) но это опять не то) в моём примере кнопка удаляется из DOM, а потом генерируется новая, точно такая же) а у вас кнопка одна и та же, просто меняется видимость) но всё равно вам спасибо) я нашел уже решение, о чём написал в одном из ответов)
    – Ivan
    30 мар 2017 в 11:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.