#jquery #binding
#jquery #привязка
Вопрос:
Я пытался найти способ добавить одно и то же действие для нескольких событий.
У меня есть следующее действие, назначенное #comid (которое является меню выбора).
$("#comid").change(function()
{
comid = $("#comid").val();
//alert(comid);
$('#com_photo').addClass('loading');
$('#com_photo').load('ajax.php?requestType=ajaxamp;action=get_com_photoamp;comid=' comid, function() {
$('#com_photo').removeClass('loading');
$('#com_photo img').hide();
$('#com_photo img').fadeIn(1000);
alert('Image Loaded.');
});
});
Теперь приведенный выше код работает хорошо. Когда пользователь выбирает элемент из меню выбора, запускается событие изменения, выполняется ajax-запрос и отображается изображение вместе с окном предупреждения «Изображение загружено».
Но я хочу, чтобы одно и то же действие запускалось, если пользователь не использует мышь, а вместо этого использует нажатие клавиши вверх / вниз для выбора из меню. Он не выполняет этого по умолчанию, на что я надеялся, но, похоже, это не так, поэтому я хочу назначить то же действие для события keyup или keydown, но я не хочу писать (или копировать / вставлять) один и тот же код снова.
После некоторого поиска я узнал о bind (), я попытался сделать это следующим образом:
$("#comid").bind('keyup',function(event){
$("#comid").trigger('change');
}
Это работает, но когда я использую keyup, я дважды вижу окно предупреждения с надписью «Изображение загружено», поэтому я нахожу такое поведение нежелательным, поскольку кажется, что запрос выполняется дважды.
Я что-то делаю не так? или есть какие-либо лучшие альтернативы тому, чего я пытаюсь достичь?
Заранее спасибо 🙂
Комментарии:
1. Событие изменения все равно должно срабатывать при изменении с клавиатуры. разница, я думаю, в том, что он не будет срабатывать до тех пор, пока onblur или пользователь не нажмет где-нибудь еще после изменения его с помощью клавиатуры.
2. Верно, в этом проблема. есть ли какой-либо обходной путь для этого?
Ответ №1:
$("#comid").bind('change keyup', function(){
...
});
Вы можете присоединить свою функцию к нескольким событиям подобным образом. Проверьте документацию для bind, это довольно полезно.
Возможно, вы также захотите прочитать о live. Это делает (в значительной степени) то же самое, что и bind, но функция также будет применена к любым вновь созданным (соответствующим) элементам.
Редактировать: для вашего меню выбора функция будет запущена дважды, если вы используете клавиши со стрелками для выбора опции. В вашем случае вам следует просто использовать change(). Keyup() не требуется.
Комментарии:
1. 1, для более простого и понятного синтаксиса -> более простое решение (в зависимости от ситуации).
2. Да, я уже немного познакомился с привязкой. и я также пробовал этот метод, объединяя события вместе, но он по-прежнему делает то же самое.
$("body").bind('change keyup', function(){ alert('text message'); });3. В моем комментарии выше это всего лишь пример кода, показывающий поведение, о котором я говорю.
4. О, теперь я понимаю, о чем вы спрашиваете. Вы должны просто использовать функцию change (). Нет причин использовать keyup () для меню выбора. Надеюсь, это поможет! 🙂
5. Да, сначала я делал это, но при использовании только события Change () меню выбора не запускает событие Change, пока оно не потеряет фокус, и именно поэтому я пытался использовать событие KeyUp или KeyDown. Но когда я использую KeyUp или KeyDown, он выполняет запрос дважды. есть ли какой-либо обходной путь для такого поведения в меню выбора? то, что он не запускает событие change () до тех пор, пока оно не потеряет фокус, потому что я хочу, чтобы оно запускало событие change, как только элемент из меню изменяется, он делает это идеально для щелчка мыши, но не для нажатия клавиш клавиатуры вверх и вниз.
Ответ №2:
Вы можете привязать несколько событий с помощью live ():
$("#comid").live({
click: function(){/* code */},
change: function(){/* code */}
});
Затем вы можете просто обернуть свой скрипт в функцию и вызывать эту функцию при любых событиях.
Больше информации в jQuery API.