Совмещение обработчиков
Добрый день. Есть два обработчика
$('.search-button').on('click', function () {
searchClients();
});
$('.search-input-string input').on('keyup', function(event) {
//кусочек кода
searchClients();
});
Один на нажатие кнопки, второй ловит нажатие enter в инпуте. Вопрос - прямо так и оставить в целом адекватно либо можно их как то обьединить ввиду одинакового содержания? |
Объединить что?
Кстати первый раз вы можете просто написать имя функции. У вас же пустая обертка. То есть так
$('.search-button').on('click', searchClients);
|
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>
|
Куда keyup дели?
|
Цитата:
|
кнопка с инпутом не в одной форме.
Просто у меня есть некий код (в виде функции searchClients) который должен выполняться при наступлении разных событий. Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию (просто передавать будут свои параметры) Поэтому я решил уточнить этот момент - тупа перечислять элементы и указывать им обработчик события (как в моем самом первом посте) это в целом нормально? либо есть какой-то паттерн, прием, методология которая позволяет это сделать более красиво. |
можешь вот так написать
$('.search-button').on('click', searchClients);
$('.search-input-string input').addEventListener('keyup', searchClients);
$('.search-input-string input').addEventListener('keyup', function(e){кусочек кода});
если тебя повторяемость так напрягла |
Цитата:
<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>
|
laimas, решение видимо самое очевидное :) Можно сказать почти то что мне нужно. Единственное есть подозрение что при добавлении в наборы событий и элементов принципиально разных событий (например click и blur) и элементов, то логика поломается.
|
То есть, если вызывать функцию по событию обрабатываемую отдельно установленными обработчиками, то логика не поломается?
Что у меня написано, что вы будете вызывать функцию из разных обработчиков, все едино - пока ваша функция каким либо образом не будет знать источника события, толку от этой функции не будет. Поэтому в примере и показано - определили id источника. Кроме этого, можно определять в одном обработчике и тип события, и принимать соответствующее действие. В противном случае бессмыслица получается. В обработчик можно передавать и event-map, где свойствами будут события, а их значения соответствующие обработчики. Возможно это как раз и было бы лучшее в данном случае. |
| Часовой пояс GMT +3, время: 18:51. |