Почему не срабатывает event.preventDefault()?

Question

[Фрол Шмелев]

Объясните, пожалуйста, почему не срабатывает event.preventDefault(), если ucr.value 1, а data {"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7}
срабатывает только alert('данное значение ucr уже существует') но действие кнопки не отменяется

$('#mybutton').on('click', function (event) {
    $.ajax({
        url: '/zayavki/atr/getucr',
        type: 'POST',
        data: {
        },
        success: function(data){
            let res = JSON.parse(data);
            console.log(data);
            console.log(res);
            console.log('!____________!')
            let ucr=document.getElementById('ucr');
            if(data.includes(ucr.value)){
                alert('данное значение ucr уже существует');
                event.preventDefault();
            }

            console.log(data.includes(ucr.value));
                    },
        error: function(){
            alert('Error!');
        }
    });
});

Comments

[Антон Литвиненко]

наверно потому что он должен идти второй строкой и отменить действие кнопки #mybutton по умолчанию, например сабмит

[WbICHA]

Асинхронность.

[Rsa97]

А какое именно действие по умолчанию у элемента #mybutton по событию click?

[Lynn «Кофеман»]

Rsa97, вангую отправку формы

[black1277]

Странный кейс у вас, конечно... Но если вы хотите предотвратить повторные запросы - сразу после нажатия переводите кнопку в disabled состояние (и если нужно включайте обратно, когда запрос отработает)

Answer 1

[Alex Step]

Потому что event.preventDefault() у вас вызывается только после получения результата запроса - то есть через некоторое время, когда уже поздно и кнопка уже отработала.

перенесите event.preventDefault() до или после конструкции ajax запроса

Comments

[Фрол Шмелев]

спасибо, сделал так:

$('#mybutton').on('click', function (event) {
    event.preventDefault();
    let ucr=document.getElementById('ucr').value;
    $.ajax({
        url: '/zayavki/atr/getucr',
        type: 'POST',
        data: {
            ucr: ucr
        },
        success: function(data){
            if(!data.includes(ucr)){
                $("#mybutton").unbind('click').click();
            } else {alert('данное значение ucr уже существует');}
                    },
        error: function(){
            alert('Error!');
        }
    });
});