Как запустить событие onclick из назначенной переменной?

Question

У меня есть другой сценарий для кнопки отправки - отправьте информацию, если ответ правильный, и сгенерируйте ошибку, если ответ неправильный.

Сначала я сохраняю кнопку отправки onclickсобытие в переменной и сделать его null, поэтому он не будет отправлять информацию, если ответ неправильный.

Вот мой код:

(function() {
    var submitBtn = jQuery('#submitConfigBtn')[0]
    var submitBtnOnclick = submitBtn.onclick
    submitBtn.onclick = null

    jQuery('#submitConfigBtn').click(function() {
        var btn = jQuery(this);

        ...ajax call,
            success: function(response) {

                if (response === 'badresponse') {
                    console.log('Bad response')
                } else {
                    console.log('Response is ok')
                    btn.onclick = submitBtnOnclick
                    btn.click();
                }

            },
            err: function(err) {
                console.log(err)
            }
        });
    })
})()

Как я могу извлечь событие из переменной и запустить его внутри функции onclick?

Answer 1

Из того, что я понял, вы хотите отправить форму, если с ответом все в порядке. Нет необходимости хранить событие onclick только для того, чтобы остановить отправку формы, вы можете либо использовать: event.preventDefault(), либо использовать type="button" вместо этого в своей кнопке

Я использовалПоследнее здесь, поэтому вместо вызова события нажатия кнопки, вам нужно использовать .submit() для формы, например:

$(function() {
  $('.submitConfigBtn').on('click', function() {
    //ajax part here
    //sample response result
    let response = 'badresponse';
    if (response === 'badresponse') {
      console.log('Bad response')
    } else {
      console.log('Response is ok')
      $('.sampleForm').submit();
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="sampleForm" action="" method="POST">
  <button type="button" class="submitConfigBtn">Submit Config Button</button>
</form>

Answer 2

Я бы посоветовал вам сделать хитрую логику.

Шаг 1. Используйте две кнопки 1. Тип отправки 2. Тип кнопки

Шаг 2. Всегда скрывайте кнопку отправки.

Шаг 3.

if(response == true){
 $("submitbtnid").trigger('click');
}
else {
 console.log('write your custom logic');
} 

Answer 3

Если вы хотите избежать «стандартного действия», вы можете вызвать event.preventDefault() внутри функции обработчика кликов. Нет необходимости удалять и переустанавливать саму функцию щелчка.

Кроме того, элемент jquery btn не будет знать, что делать со свойством "onclick". Это было бы свойством объекта DOM.

Вы не первый, кто придумал эту проблему ;-) Смотрите здесь https://stackoverflow.com/a/14154017/2610061 для возможного решения.

(Похоже, вы должны знать , какое действие вы хотите отложить, поскольку не существует стандартного способа запоздалого запуска любого действия, которое изначально было предотвращено. Вы можете запускать только определенныетакие действия, как .submit() формы.)

Я подготовил сценарий, который будет соответствовать вашим требованиям. Обратите внимание, что я не фиксирую событие "click" на фактической кнопке , но вместо этого я слушаю событие "submit" в окружающей форме . Форма может быть отправлена ​​либо нажатием кнопки, либо нажатием клавиши возврата после заполнения поля ввода. Текущий обработчик событий будет выполнен в любом случае!

Сначала предотвращается действие по умолчанию, а затем отправляется асинхронный вызов Ajax. Его функция успеха в .done() выполняет некоторую «значимую» проверку ответа и - в зависимости от ее результата - инициирует отправку формы или нет. В случае сбоя самого вызова Ajax функция .fail() переходит в действие и выполняет все необходимое ...

$(function() {
 $('.validatedForm').on('submit', function(ev) {
  ev.preventDefault(); // prevent submission before AJAX call
  $.getJSON('http://jsonplaceholder.typicode.com/users/'+$('#q').val())
   .done(function(da){
     console.log(da);
     if (da.address.city!=="Howemouth") { // some meaningful test on the result ...
       setTimeout(()=>ev.target.submit(), 3000); // belated form submission!
       console.log('Hey, the input was changed, in 3 seconds I will go to google!')
     }})
   .fail(function(da){console.log(da.status, da.statusText,'- Only user-IDs 1 ... 10 are allowed.');});
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://google.com"  class="validatedForm">
 <input name="q" id="q" value="7">
 <button>submit</button>
</form>