Question

我正在尝试将功能绑定到click事件。一切工作正常，但该功能的某些行未执行，而其他行则完全按照我的要求运行。

$("#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>

Answer 2

它对我有用（我跳过了未知的功能）：

$("#search").click(function(event){
    event.preventDefault();
    $(this).prop("disabled", true); 
    $('#search-help').css('display','block');  
    $('#search-help').text("Please wait while we are processing your request");

    update_access_from_refresh(); //working fine
    ...
    do_search_ajax();
    // this function works just fine.
    ...
    $("#asin").removeClass("is-invalid"); 
    $("#keywords").removeClass("is-invalid");  
    $(this).prop("disabled", false);  
    $('#search-help').css('display','none'); 
});

一些jquery代码无法正常工作，而其他jquery代码则可以正常工作

2 个答案: