Форум

nani_t · #1 (**permalink**) 22.07.2015, 12:18

Добрый день. Есть два обработчика

$('.search-button').on('click', function () {
        searchClients();
    });

    $('.search-input-string input').on('keyup', function(event) { 
          //кусочек кода
           searchClients();
    });

Один на нажатие кнопки, второй ловит нажатие enter в инпуте. Вопрос - прямо так и оставить в целом адекватно либо можно их как то обьединить ввиду одинакового содержания?

kostyanet · #2 (**permalink**) 22.07.2015, 13:22

Объединить что?

Кстати первый раз вы можете просто написать имя функции. У вас же пустая обертка. То есть так

$('.search-button').on('click', searchClients);

Sigizmund2012 · #3 (**permalink**) 22.07.2015, 15:56

nani_t,
Если у вас инпут и кнопка в форме находятся, то можно так:

<form action="" id="search-form">
  <div class="search-input-string">
    <input type="text" placeholder="Search">
  </div>
  <input class="search-button" type="submit" value="Search">
</form>

  <script>
function searchClients(){
  console.log('Searching...');
}

$('#search-form').on('submit', function(event) { 
   event.preventDefault();
   searchClients();
});
  </script>

kostyanet · #4 (**permalink**) 22.07.2015, 17:06

Куда keyup дели?

Sigizmund2012 · #5 (**permalink**) 22.07.2015, 17:30

Сообщение от kostyanet

Куда keyup дели?

Он не нужен, форма сабмитится и по Enter на инпуте и по клику на кнопку.

nani_t · #6 (**permalink**) 23.07.2015, 15:30

кнопка с инпутом не в одной форме.
Просто у меня есть некий код (в виде функции searchClients) который должен выполняться при наступлении разных событий. Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию (просто передавать будут свои параметры)

Поэтому я решил уточнить этот момент - тупа перечислять элементы и указывать им обработчик события (как в моем самом первом посте) это в целом нормально? либо есть какой-то паттерн, прием, методология которая позволяет это сделать более красиво.

tysonfury2015 · #7 (**permalink**) 23.07.2015, 15:39

можешь вот так написать

$('.search-button').on('click', searchClients);
 
    $('.search-input-string input').addEventListener('keyup', searchClients);
        $('.search-input-string input').addEventListener('keyup', function(e){кусочек кода});

если тебя повторяемость так напрягла

laimas · #8 (**permalink**) 24.07.2015, 00:52

Сообщение от nani_t

Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunc(e) {
    alert(e.target.id)
} 
$(function() {
    $('body').on('keyup click keypress', '#one,#two,#three', myFunc)
});
</script>     
</head> 
<body>
<input id="one" />
<input id="two" />
<input id="three" />
</body> 
</html>

nani_t · #9 (**permalink**) 24.07.2015, 09:09

laimas, решение видимо самое очевидное

Можно сказать почти то что мне нужно. Единственное есть подозрение что при добавлении в наборы событий и элементов принципиально разных событий (например click и blur) и элементов, то логика поломается.

laimas · #10 (**permalink**) 24.07.2015, 11:30

То есть, если вызывать функцию по событию обрабатываемую отдельно установленными обработчиками, то логика не поломается?

Что у меня написано, что вы будете вызывать функцию из разных обработчиков, все едино - пока ваша функция каким либо образом не будет знать источника события, толку от этой функции не будет. Поэтому в примере и показано - определили id источника. Кроме этого, можно определять в одном обработчике и тип события, и принимать соответствующее действие. В противном случае бессмыслица получается.

В обработчик можно передавать и event-map, где свойствами будут события, а их значения соответствующие обработчики. Возможно это как раз и было бы лучшее в данном случае.

Форум

Справочник

Discord чат

Курсы javascript