jQuery обработка событий

281
01 апреля 2017, 00:04

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

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

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

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

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

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

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

Answer 1

Попробуйте

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

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

$('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.

Answer 3

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

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>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Как удалить тег и достать текст
jQuery

Как удалить тег и достать текст

Делаю поиск, но столкнулся с проблемой, что скрипт не работает, если текст взят в тег spanКак можно удалить span, чтобы текст остался?

 358
Можно ли в bootstrap блоку задать ширину?
CSS

Можно ли в bootstrap блоку задать ширину?

Как установить фиксированную ширину блока в bootstrap? Пробовал сделать так <div class="col-md-1" style="width: 200px;">, но безуспешноПрошу помощи, кто знает

 328
mouseover на 6 блоках
CSS

mouseover на 6 блоках

 256
Пошаговый выбор input
CSS

Пошаговый выбор input

 256