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

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

您必须使用complete回调，而不是使用success回调。 conmplete并未将响应作为参数传入，而是jqXHR对象。

由于data没有引用回复，data.title所有其他属性都会返回undefined，这使得.val实际获取该值，而不是设置它。

要明确：问题与查找或未找到元素无关。

Answer 2

根据我的经验，当脚本无法找到DOM元素但是从控制台运行相同代码时可以找到它，因为脚本在浏览器有机会呈现相关DOM元素之前执行。您的脚本是否位于HTML页面的顶部？如果是这样，尝试这样的事情：

$(document).ready(function () { /* place or call your code here */ })

确保脚本在页面完全加载之前不会启动。

在console.log中输出时找到元素

2 个答案: