Jquery событие клика не работает после события изменения

Question

Вот мой код:

 function change() {
        console.log("change");
        $('span[data-valmsg-for="Car"]').text('');
    }

$("#saveCar").on("click", function () {
            console.log("savecar");
            if (IsCarFormValid() == true) {
                $("#saveCar").attr("disabled", true);
                var model = {};

            }
        });

Когда я меняю данные при вводе и нажимаю на кнопку, событие нажатия кнопки не работает. Почему?

Answer 1

Используя alert(), вы увидите, что событие работает нормально:

$("#Car").on("change", function() {
  console.log("vincode change");
  $('span[data-valmsg-for="Car"]').text('');
});

$("#saveCar").on("click", function() {
  alert("button is clicked")
  console.log("savecar");
  var model = {};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="Car" name="Car" value="ggdsgdsagdgag">
<span data-valmsg-for="Car" class="text-danger">some validation error</span>

<button type="button" class="btn btn-success" id="saveCar">Save</button>

Что может немного запутать, так это то, что предложение some validation error удаляется после события onBlur (когда щелчок мыши находится за пределами ввода). Поэтому, если вы измените свой текст и нажмете непосредственно на кнопку, текст сначала исчезнет, ​​что означает, что ваш курсор больше не находится на кнопке. Поэтому на практике вы не нажимаете на кнопку.

Но если вы измените предложение, щелкните за пределами ввода (не на кнопке) и , а затем на кнопке, вы увидите сообщение с предупреждением.