来自单击的AJAX调用失败

我有一个奇怪的错误,从外部触发器('click')调用执行的on('click')侦听器中的ajax调用将失败,但如果通过常规用户鼠标单击调用on('click')侦听器,则会正确执行。

HTML格式:

....
<div class="navbar-collapse collapse">
  <ul class="navbar-nav mr-auto navbar-right">
    <li class="nav-item dropdown active">
      <a class="nav-link dropdown-toggle" id="nbd" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Graphs<span class="sr-only">(current)</span></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item ycai" id="d1" href="#" data-type="1">Graph 1</a>
          <a class="dropdown-item ycai" id="d2" href="#" data-type="2">Graph 2</a>
        </div>
    </li>
  </ul>
  <form class="form-inline my-2 my-lg-0 navbar-right">
    <div id="nbsa"></div>
    <input class="form-control mr-sm-2" id="nbpc" placeholder="Postal Code" style="width:140px" aria-label="Postal Code" type="search">
    <select class="form-control mr-sm-2" id="nbs">
      <option value="1" selected="true">Average-case</option>
      <option value="2">High-case</option>
    </select>
  </form>
</div>

<script>
  var dataV = {
    gtype:2,
    nbpc: null,
    nbs:  null
  };

  $('#nbpc').keyup(function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      dataV.nbpc = $(this).val();
      switch(dataV.gtype) {
        case 1:
          $('#d1').trigger('click');
          break;
        case 2:
          $('#d2').trigger('click');
          break;
      }
    }
  });

  $('#nbtop').on('click', '.ycai', function(e) {
    console.log('In Click...',$(this).attr('data-type'));
    e.preventDefault();
    var i=0, rval;
    if (!$(this).hasClass("dislink")) {
      $(this).addClass("dislink");
      dataV.nbpc = $('#nbpc').val();
      dataV.nbs = $('#nbs').val();
      dataV.gtype = +$(this).attr('data-type');
      console.log(dataV);
      if (dataV.gtype<8 && dataV.nbpc == "") {
        alert('Postal Code Cannot Be Blank...');
        $('.dislink').removeClass('dislink');
        $('#nbpc').focus();
        return;
      }

      $.ajax({
        type: 'POST',
        url: '/climG',
        dataType: 'json',
        data: dataV
      }).fail(function(jqXHR, textStatus, error) {
        console.log(textStatus);
        console.log(error);
        alert('Error on Graph');
      }).done(function(res) {
        ...
      });

场景1:如果我先在(#nbpc)中添加邮政编码(不按Enter键),然后选择一个图(如图2),ajax调用将通过并完美执行。

场景#2:如果我在(#nbpc)中添加邮政编码,然后按Enter键(默认为图2),然后通过$('#nbpc')键控侦听器执行$('#d2').trigger('click')。则ajax调用将失败,并且不会出现错误消息。

在方案1中,控制台日志行是完美的:

Console Log Line 1
... 
Console Log Line N
POST /climG 200 378.344ms - 1872

GET /? 304 192.332 ms - -
POST /climG - - ms - -
Console Log Line 1
... 
Console Log Line N

那么在场景2中,一个额外的GET/?是由于某种未知的原因生成的,/climG调用会快速返回一个错误,但实际的/climG服务器端函数会继续执行(由POST消息后的控制台日志行证明)。我不知道发生了什么事。谢谢。