Jquery 处理从 ajax 附加值

Question

所以我已经阅读了有关 ajax 的回调和异步行为的内容，但我不知道如何从 ajax 的附加值创建事件。

我有这个 html :

var searchRequest = null;
$(function() {
  $(':input[type="submit"]').prop('disabled', true);
  var minlength = 5;
  $("#cp").keyup(function() {
    var that = this,
      value = $(this).val().trim();;
    value = value.replace(/\s/g, '');

    if (value.length == minlength) {
      if (searchRequest != null)
        searchRequest.abort();
      searchRequest = $.ajax({
        type: "POST",
        url: "post_job_ville.php",
        data: {
          'searchterm': value
        },
        dataType: "text",
        success: function(msg) {
          $("#ville").append(msg);
        }
      });
    }
  });
});


// Code to remove the disabled state of submit button
if ($('#ville').val()) {
  $(':input[type="submit"]').prop('disabled', false);
  $(':input[type="submit"]').toggleClass('btn-custom btn-primary');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input name="cp" id="cp" class="form-control">
</div>
<div class="form-group">
  <select class="form-control" id="ville">
	<option selected="selected" value="">Select a value</option>
	</select>
</div>
<input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Submit">

我的 ajax 调用工作正常。当有人在输入字段(#cp)中输入 5 个字符时，它会触发 ajax 调用并追加

 <option value="x">...</option> 

到选择菜单(#ville)。

问题是，如果选择了带有值的 ajax 调用选项，我希望 Jquery 删除提交按钮的禁用状态。所以我在 JS 的末尾编写了代码，但由于 ajax 是异步的，所以它不能像那样工作。我试图将代码放在ajax调用的成功部分，但它不起作用。

如果有人知道如何继续，我将非常感激。

谢谢!

Answer 1

您可以尝试在您的选择上放置一个事件，如下所示:

$('#ville').on('change', function(e) {
  if (e.target.value) {
    $(':input[type="submit"]').prop('disabled', false);
    /* other stuffs... */
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    /* other stuffs... */
  }
})

Jquery Selector 中的“on()”方法允许您将您选择的事件放置在所选元素上。这里我们放置“change”事件，以便在输入值“change”时回调函数。您只需要检查您选择的值是否不为空(例如您选择的第一个条目)，然后就完成了。

或者类似的东西:

$('#ville').on('change', function(e) {
  const value = e.target.value
  $(':input[type="submit"]').prop('disabled', !value);
  /* other stuffs... */
})