jQuery wiele zdarzeń do uruchomienia tej samej funkcji
Czy jest sposób na keyup
, keypress
, blur
, i change
zdarzenia wywołują tę samą funkcję w jednej linii, Czy muszę je robić osobno?
Problem, który mam polega na tym, że muszę zweryfikować niektóre dane za pomocą db lookup i chciałbym się upewnić, że Walidacja nie zostanie pominięta w żadnym przypadku, niezależnie od tego, czy zostanie wpisana lub wklejona do pola.
10 answers
Możesz użyć .on()
, aby powiązać funkcję z wieloma zdarzeniami:
$('#element').on('keyup keypress blur change', function(e) {
// e.type is the type of event fired
});
Lub po prostu przekazać funkcję jako parametr do normalnych funkcji zdarzeń:
var myFunction = function() {
...
}
$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-04 00:14:24
W jQuery 1.7 metoda .on()
jest preferowaną metodą dołączania programów obsługi zdarzeń do dokumentu. We wcześniejszych wersjach Metoda .bind()
jest używana do dołączania obsługi zdarzeń bezpośrednio do elementów.
$(document).on('mouseover mouseout',".brand", function () {
$(".star").toggleClass("hovered");
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-11 06:48:38
Szukałem sposobu, aby uzyskać Typ zdarzenia, gdy jQuery nasłuchuje kilku zdarzeń naraz, a Google umieścił mnie tutaj.
Więc dla zainteresowanych, event.type
jest moja odpowiedź:
$('#element').on('keyup keypress blur change', function(event) {
alert(event.type); // keyup OR keypress OR blur OR change
});
Więcej informacji w jQuery doc .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-14 22:00:49
Możesz użyć metody bind aby dołączyć funkcję do kilku zdarzeń. Po prostu podaj nazwy zdarzeń i funkcję obsługi jak w tym kodzie:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
Inną opcją jest użycie obsługi łańcucha jQuery api.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-28 18:55:40
Jeśli dołączysz ten sam mechanizm obsługi zdarzeń do kilku zdarzeń, często napotkasz problem z uruchomieniem więcej niż jednego z nich na raz(np. naciśnięcie klawisza tab po edycji; keydown, change i blur mogą zostać uruchomione).
Wygląda na to, że to, czego naprawdę chcesz, jest czymś takim:
$('#ValidatedInput').keydown(function(evt) {
// If enter is pressed
if (evt.keyCode === 13) {
evt.preventDefault();
// If changes have been made to the input's value,
// blur() will result in a change event being fired.
this.blur();
}
});
$('#ValidatedInput').change(function(evt) {
var valueToValidate = this.value;
// Your validation callback/logic here.
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-28 19:33:37
Możesz zdefiniować funkcję, którą chcesz ponownie użyć, jak poniżej:
var foo = function() {...}
I później możesz ustawić dowolną liczbę detektorów zdarzeń, które chcesz wywołać w obiekcie, używając funkcji on('event'), pozostawiając odstęp między nimi, jak pokazano poniżej:
$('#selector').on('keyup keypress blur change paste cut', foo);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-31 18:08:28
Tak to robię.
$("input[name='title']").on({
"change keyup": function(e){
var slug = $(this).val().split(" ").join("-").toLowerCase();
$("input[name='slug']").val(slug);
},
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-09 12:46:30
Odpowiedź Tatu brzmi, jak bym to intuicyjnie zrobił, ale w Internet Explorerze napotkałem pewne problemy z tym sposobem zagnieżdżania / wiązania zdarzeń, mimo że odbywa się to poprzez .on()
metoda.
Nie byłem w stanie dokładnie określić, z którymi wersjami jQuery jest problem. Ale czasami widzę problem w następujących wersjach:
- 2.0.2
- 1.10.1
- 1.6.4
- Mobile 1.3.0B1
- Mobile 1.4.2
- Mobile 1.2.0
Moim obejściem było najpierw zdefiniowanie funkcji,
function myFunction() {
...
}
A następnie obsłuż zdarzenia indywidualnie
// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);
Nie jest to najładniejsze rozwiązanie, ale działa dla mnie i pomyślałem, że mogę je umieścić, aby pomóc innym, którzy mogą natknąć się na ten problem]}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-07 08:57:03
"czy jest sposób na keyup
, keypress
, blur
, i change
zdarzenia wywołują tę samą funkcję w jednej linii?"
Możliwe jest użycie .on()
, która przyjmuje następującą strukturę: .on( events [, selector ] [, data ], handler )
, dzięki czemu można przekazać wiele zdarzeń do tej metody. W Twoim przypadku powinno to wyglądać tak:
$('#target').on('keyup keypress blur change', function(e) {
// "e" is an event, you can detect the type of event using "e.type"
});
A oto przykład na żywo:
$('#target').on('keyup keypress blur change', function(e) {
console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-26 19:16:49
$("element").on("event1 event2 event..n", function() {
//execution
});
Ten samouczek dotyczy obsługi wielu zdarzeń.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-22 08:47:46