jQuery Blur и проблема распространения Submit

У меня есть простая новая пользовательская форма с полем ввода «Отображаемое имя», которое запускает вызов ajax для события blur(). Это позволяет проверить, существует ли уже введенное значение в БД.

Пример:

 $("#displayname").blur(function() {
    //do something
 })

После того, как отображаемое имя указано, пользователь нажимает кнопку «Отправить», чтобы продолжить, что является следующим немедленным действием в форме.

Пример:

$("#button").click(function() {
   $("#form").trigger("submit");
})

Однако событие blur() ВСЕГДА запускается первым, и нажатие кнопки не регистрируется. Только при втором нажатии на кнопку распространение становится правильным. Это вызывает хаос в моей форме.

Есть ли способ подавить событие blur() в текстовом поле, КОГДА я нажимаю кнопку?

Спасибо за любую помощь Ура!


person user1039756    schedule 10.11.2011    source источник
comment
Может быть, будет лучше, если вы подавите событие щелчка (возможно, отключите кнопку), пока функция размытия не будет выполнена. Как вы думаете?   -  person ezakto    schedule 10.11.2011
comment
Поскольку размытие (фокусировка) срабатывает перед щелчком во всех браузерах, единственное, что вы можете сделать, это установить обработчик размытия в setTimeout и вернуться раньше, если кнопка была нажата. Но в целом это плохой дизайн.   -  person AutoSponge    schedule 10.11.2011


Ответы (2)


Если я правильно вас понимаю, проблема возникает, когда blur вызывается нажатием кнопки.

К счастью, информация о событии передается обработчику, а событие должно содержать свойство target. Из этого вы можете сделать вывод, нужно ли что-то делать с blur. Используйте свой любимый отладчик js, чтобы остановиться в обработчике событий blur и посмотреть, что находится в свойстве target.

$("#displayname").blur(function(evt) {
   if (evt.target is not the button){ // figure this out with debugger
      //do something 

       return true; // I handled it
   }
   return false; // I didn't handle it
 })

Однако в этом сценарии вы не будете выполнять динамическую проверку того, что все, что находится в поле, отсутствует в базе данных.

У @eZakto есть хорошее предложение отключить кнопку отправки до тех пор, пока не будет выполнена проверка ajax вашего ввода.

person hvgotcodes    schedule 10.11.2011
comment
Всем спасибо. Извините, что поздно ответил. Мы также не смогли решить проблему с помощью event.target, поэтому единственным оставшимся методом было отправить валидацию в java и получить обратный вызов. - person user1039756; 23.11.2011

Вы ищете «event.relatedTarget». Для событий focusOut или blur это устанавливается на элемент, получающий фокус, поэтому вы знаете, что размытие вызвано нажатием кнопки отправки, а не каким-либо другим событием.

$("#displayname").blur(function(event) {
    if (event.relatedTarget && (event.relatedTarget.id === 'button')){
        $("#button").trigger('click');
    }
    else {
        // do blur stuff here 
    }
});
person Carl Sanders    schedule 31.10.2014