0

Есть у меня на странице инпут и ссылка. Человек вводит что то в инпуте и нажимает ссылку, должны сработать оба события. В случае с console.log() срабатывают оба, но например если сделать вместо этого alert() то сработает только change. Помогите разобраться, как сделать чтоб сработали оба события?

ТАК РАБОТАЮТ ОБА СОБЫТИЯ:

$('#input').change(function() {
    console.log('change');
});

$('#link').click(function(e) {
    console.log('click');
    e.preventDefault();
});

ТАК РАБОТАЕТ ТОЛЬКО CHANGE:

$('#input').change(function() {
    alert('change');
});

$('#link').click(function(e) {
    alert('click');
    e.preventDefault();
});

2 ответа 2

1

alert() блокирует выполнение скриптов на странице. Дело частично в этом.

И частично, в том, что событие change у инпута срабатывает, если убрать с инпута фокус (т.е. щелкнуть в какую-нибудь другую часть страницы).

Вот тут и начинается магия, когда у тебя страница блокируется alert`oм от события change (ведь мы фокус с инпута убрали, щелкнув по ссылке). И, скорее всего, до события click дело просто не доходит.

0

Как сказал @FreeDooM:

И, скорее всего, до события click дело просто не доходит.

Именно, что дело не доходит, т.к. первым делом происходит потеря фокуса, при коем срабатывает модальный alert, соответственно click приходится уже не по странице, а по области, закрывающей собой страницу вне модельного окна, т.е. клика-то и нет по #link

Если отложить выполнение alert, то вы получите оба сообщения:

$('#link').click(function(e) {
    alert2('click');
    e.preventDefault();
});

$('#input').change(function() {
    alert2('change');
});


window.alert2 = function(str){
    setTimeout(function(){ alert(str); }, 500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='input' />
<div id='link'>
    link
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.