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 you have read our privacy policy.

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