22.07.2015, 12:18
|
Новичок на форуме
|
|
Регистрация: 23.04.2015
Сообщений: 4
|
|
Совмещение обработчиков
Добрый день. Есть два обработчика
$('.search-button').on('click', function () {
searchClients();
});
$('.search-input-string input').on('keyup', function(event) {
//кусочек кода
searchClients();
});
Один на нажатие кнопки, второй ловит нажатие enter в инпуте. Вопрос - прямо так и оставить в целом адекватно либо можно их как то обьединить ввиду одинакового содержания?
|
|
22.07.2015, 13:22
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Объединить что?
Кстати первый раз вы можете просто написать имя функции. У вас же пустая обертка. То есть так
$('.search-button').on('click', searchClients);
|
|
22.07.2015, 15:56
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
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>
Последний раз редактировалось Sigizmund2012, 22.07.2015 в 15:58.
|
|
22.07.2015, 17:06
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Куда keyup дели?
|
|
22.07.2015, 17:30
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
Сообщение от kostyanet
|
Куда keyup дели?
|
Он не нужен, форма сабмитится и по Enter на инпуте и по клику на кнопку.
|
|
23.07.2015, 15:30
|
Новичок на форуме
|
|
Регистрация: 23.04.2015
Сообщений: 4
|
|
кнопка с инпутом не в одной форме.
Просто у меня есть некий код (в виде функции searchClients) который должен выполняться при наступлении разных событий. Пака-что это нажатие кнопки и ентер в инпуте, но будут и другие события которые будут опять вызывать эту же функцию (просто передавать будут свои параметры)
Поэтому я решил уточнить этот момент - тупа перечислять элементы и указывать им обработчик события (как в моем самом первом посте) это в целом нормально? либо есть какой-то паттерн, прием, методология которая позволяет это сделать более красиво.
Последний раз редактировалось nani_t, 23.07.2015 в 15:34.
|
|
23.07.2015, 15:39
|
Аспирант
|
|
Регистрация: 22.07.2015
Сообщений: 68
|
|
можешь вот так написать
$('.search-button').on('click', searchClients);
$('.search-input-string input').addEventListener('keyup', searchClients);
$('.search-input-string input').addEventListener('keyup', function(e){кусочек кода});
если тебя повторяемость так напрягла
Последний раз редактировалось tysonfury2015, 23.07.2015 в 15:42.
|
|
24.07.2015, 00:52
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от 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>
|
|
24.07.2015, 09:09
|
Новичок на форуме
|
|
Регистрация: 23.04.2015
Сообщений: 4
|
|
laimas, решение видимо самое очевидное Можно сказать почти то что мне нужно. Единственное есть подозрение что при добавлении в наборы событий и элементов принципиально разных событий (например click и blur) и элементов, то логика поломается.
|
|
24.07.2015, 11:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
То есть, если вызывать функцию по событию обрабатываемую отдельно установленными обработчиками, то логика не поломается?
Что у меня написано, что вы будете вызывать функцию из разных обработчиков, все едино - пока ваша функция каким либо образом не будет знать источника события, толку от этой функции не будет. Поэтому в примере и показано - определили id источника. Кроме этого, можно определять в одном обработчике и тип события, и принимать соответствующее действие. В противном случае бессмыслица получается.
В обработчик можно передавать и event-map, где свойствами будут события, а их значения соответствующие обработчики. Возможно это как раз и было бы лучшее в данном случае.
Последний раз редактировалось laimas, 24.07.2015 в 11:33.
|
|
|
|