javascript - 仅在 console.log 中输出时才找到元素

Question

我正在调用以下电话:

$.ajax({
    type: 'POST',
    url: '<?= POST_CALENDAR_GET_EVENT; ?>',
    data: {
        'token': $('meta[name=token]').attr("content"),
        'id': calEvent.id
    },
    dataType: 'JSON',
    complete: function (data) {
        var $event = $('#myEditEvent');
        console.log($event.find('input[my_name="title"]'));
        $event.find('input[my_name="title"]').val(data.title);
        $event.find('input[my_name="date"]').val(data.date);
        $event.find('input[my_name="start_time"]').val(data.start_time);
        $event.find('input[my_name="end_time"]').val(data.end_time);
        $event.find('input[my_name="street1"]').val(data.street1);
        $event.find('input[my_name="street2"]').val(data.street2);
        $event.find('input[my_name="city"]').val(data.city);
        $event.find('input[my_name="state"]').val(data.state);
        $event.find('input[my_name="zip"]').val(data.zip);

        $("#myEditEvent").modal();
        NProgress.done();
    }
});

当我这样做时，在 DOM 中找不到输入。我从 jQuery 获取了 prevObject 对象。我知道这些元素存在，并且我尝试以不同的方式调用它们(例如使用类选择器)。

我的困惑是，当我在控制台上运行完全相同的代码时，我可以找到它们...为什么？

<div id="myEditEvent" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editEventModal" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
      ×
    </button>
    <h5 id="editEventModal">
      Edit Event
    </h5>
  </div>
  <div class="modal-body">
    <div class="formField">
      <div class="row-fluid">
        <div class="span2">
          <span class="fLabel">
            Title                                           
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="title" name="events[title]">
      </div>
          </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              Date                                          
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="date" disabled="disabled" id="editEventDate" name="events[date]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              Start Time                                            
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="start_time" class="timepicker" name="events[start_time]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              End Time                                          
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="end_time" class="timepicker" name="events[end_time]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              Street *          
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="street1" name="addresses[street1]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              Line 2                                                                
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="street2" name="addresses[street2]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              City *            
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="city" name="addresses[city]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              State *           
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="state" name="addresses[state]">
      </div>
  </div>
      </div>
      <div class="formField">
        <div class="row-fluid">
          <div class="span2">
            <span class="fLabel">
              Zip *         
          </span>
      </div>
      <div class="span10">

        <input type="text" my_name="zip" name="addresses[zip]">
      </div>
  </div>
      </div>

  </div>
  <div class="modal-footer">
    <button class="button bSky sButton" data-dismiss="modal" aria-hidden="true">
      Close
    </button>
    <button class="button bMuddy sButton" id="updateEvent">
      Update Event
    </button>
  </div>
</div>

Answer 1

所以，事实证明问题实际上非常明显:

您必须使用 success 回调，而不是使用 complete 回调。 complete 没有获取作为参数传入的响应，而是获取 jqXHR 对象。

由于 data 不引用响应，data.title 和所有其他属性将返回 undefined，这使得 .val 实际上是获取值，而不是设置它。

<小时/>

需要明确的是:该问题与查找或未找到该元素无关。