javascript - 一些 jquery 代码不工作而其他的工作正常

Question

我正在尝试将一个函数绑定(bind)到一个点击事件。一切正常，但函数的某些行没有执行，而其他行完全按照我的意愿工作。

$("#search").click(function(event){
    event.preventDefault();
    $("#search").prop("disabled", true); //not working
    $('#search-help').show(); //not working
    $('#search-help').text("Please wait while we are processing your request");//not working
    update_access_from_refresh(); //working fine
    ...
    do_search_ajax();
    // this function works just fine.
    ...
    $("#asin").removeClass("is-invalid"); //working
    $("#keywords").removeClass("is-invalid"); //working
    $("#search").prop("disabled", false); //I don't know its working
    $('#search-help').hide(); // I don't know its working
});

我在这里评论了不起作用的代码行。

不起作用的代码行，如果我从 chrome 控制台运行它，它就可以正常工作。但是从功能上来说，是不行的。

这是相关的 HTML 代码。我认为这不是 HTML 的问题。因为当我从控制台运行代码时，它工作正常。但不是从功能开始工作。

<form class="search-form">
              <div class="form-row">
                <div class="form-group col-md-3">
                    <button type="submit" id="search" class="btn btn-block btn-secondary mb-2">Search</button>
                </div>
                   ...
                <div class="mr-auto ml-auto">
                    <span  class="text-info" id="search-help" style="display: none;"></span> 
                </div>
              ...
          </form>

部分代码是从 html 中截取的。

我查看了页面源代码，代码也是最新的。

提前致谢

Answer 1

你应该在调用 ajax 之后执行操作

function do_search_ajax () {
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
}
$("#search").click(function(event) {
  event.preventDefault();
  $("#search").attr("disabled", true); // working
  $('#search-help').show(); //not working
  $('#search-help').text("Please wait while we are processing your request"); //not working

  do_search_ajax().then(json => {
      console.log(json)
      $("#asin").removeClass("is-invalid"); //working
      $("#keywords").removeClass("is-invalid"); //working
      $("#search").prop("disabled", false); //I don't know its working
      $('#search-help').hide(); // I don't know its working
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form class="search-form">
  <div class="form-row">
    <div class="form-group col-md-3">
      <button id="search" class="btn btn-block btn-secondary mb-2">Search</button>
    </div>
    ...
    <div class="mr-auto ml-auto">
      <span class="text-info" id="search-help" style="display: none;"></span>
    </div>
    ...
</form>