javascript - AJAX 调用后无法禁用 javascript 中的按钮

Question

我有以下 js 文件，我想在 AJAX 调用后禁用按钮:

$('document').ready(function() {
  const runField = $('input[id=run]')
  const runButton = $('.btn-run')
  const saveButton = $('.btn-save')

  runButton.on('click', function(event) {
    console.log('run clicked')
    runField.val(1)
    event.preventDefault()
    $('.btn-run').prop('disabled', true)
    console.log($('.btn-run').prop('disabled'))
    runCode()
    $('.btn-run').prop('disabled', false)
  })
})

runCode() 是我的 AJAX 函数，但是当我使用 .prop('disabled', true) 时，按钮仍然没有禁用，即使以下内容记录的行在我的控制台中返回 true。我确保 ID 等所有属性都是正确的。任何帮助表示赞赏!

Answer 1

您需要对 $('.btn-run').prop('disabled', false) 使用 Promise 或回调函数 - 共享您的 runCode如果可能的话会有所帮助。

您的 AJAX 回调应如下所示。 URL 将有所不同，但 $('.btn-run').prop('disabled', false) 成功运行。这应该意味着它将生效。

$.ajax({
    url: "demo_test.txt", 
    success: function(result){
        $('.btn-run').prop('disabled', false)
    }
});