Блог

Главная - Вопросы по программированию - Как вызвать событие изменения и щелчка из того же класса в Jquery?

Как вызвать событие изменения и щелчка из того же класса в Jquery?

#html #jquery

#HTML #jquery

Вопрос:

У меня есть несколько флажков, переключателей и кнопок, все эти элементы имеют один и тот же класс filterProducts. Я фильтрую продукты и отображаю их на веб-странице. но проблема, с которой я сталкиваюсь, заключается в том, что это либо вызов события щелчка, либо событие изменения, есть ли какое-либо решение этой проблемы? Хотя я могу назначить другой класс для каждого элемента и создать другой блок кода, который будет выполнять эту работу, но я считаю, что это увеличит дублирование.

 $(document).on('change click', '.filterProducts', function(e) { // This block of code is only working for click event.

  e.preventDefault();

  if ($(this).hasClass('disabled')) {
    return false;
  }

  // Filter code goes here ...

});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="filterProducts" name="operator" value="1" id="operator" />
<input type="radio" class="filterProducts" name="open_for_sale" value="1" />
<input type="radio" class="filterProducts" name="open_for_sale" value="0" />
<button type="button" class="pagination-button filterProducts" page="1">1</button>

Любое предложение будет высоко оценено.

Комментарии:

1. Как говорили другие, событие изменения выполняется при нажатии радио или флажка. Поэтому вам понадобится только событие изменения. Просто удалите событие щелчка.

2. событие изменения не будет работать для кнопки, вот с чем я борюсь…

Ответ №1:

Вы можете использовать именованную функцию для присоединения одной и той же функции к нескольким обработчикам событий с разными селекторами.

 $(document).on('change', 'input.filterProducts', filterProducts);
$(document).on('click', 'button.filterProducts', filterProducts);

function filterProducts(e) {
    e.preventDefault();
    console.log(e.target.tagName);

    if( $(this).hasClass('disabled')) {
        return false;
    }
    
    // Filter code goes here ...
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="filterProducts" name="operator" value="1" id="operator" />
<input type="radio" class="filterProducts" name="open_for_sale" value="1" />
<input type="radio" class="filterProducts" name="open_for_sale" value="0" />
<button type="button" class="pagination-button filterProducts" page="1">1</button>