访问从 AJAX 创建的 DOM 中的信息答案

【问题标题】：Access to info in DOM Created from AJAX访问从 AJAX 创建的 DOM 中的信息
【发布时间】：2014-11-18 16:56:14
【问题描述】：

好的，我有一个 ajax 调用，我可以完美地工作并在我的页面上填充一个 Div。问题是我的脚本无法访问页面上的数据，因此我无法修改它。

我可以在 Firebug 中看到所有内容，但在源代码中看不到。所以脚本对 css 和 jquery 不起作用

我正在使用 Rails 3

我需要能够访问 TABLE id 结果，以便我的数据表 CSS 和 Jquery 对其进行样式化

HTML ->

<div id="hotload"></div>

使用 AJAX 填充的 jQuery ->

    $(document).ready(function() {
    var id = $('#id').val();
    $.ajax({
      url: "/searches/hotload_results/"+ id,
      type: "GET",
      success: function (data) {
        $("#hotload").append(data);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert('error: ' + textStatus + ': ' + errorThrown);
      }
    });
    return false;
  });

此操作的控制器 ->

  def hotload_results
    @search = Search.find(params[:id])
    @resultss = @search.searches(params[:hotloads_page])
    @search.update_attributes(:resultss => @resultss.count)
    render :partial => "hotload_results".html_safe, :layout => false
  end

源代码->（仅正文）

    <div class="container-fluid">
    <div id="hotload"></div>

萤火虫->

<div id="hotload"><div id="load_results_table" class="row-fluid">
  <div class="span12">
    <h1 class="page-header">Search Results</h1>
        <h3 class="page-subheader">&#8203;&#8203;2 Premium Loads</h3>
        <div align="center">
          <b>These are our Premium loads that we are offering. We guarentee 100% payment on these loads</b>
        </div>
        <table width="100%" cellspacing="0" class="redmond stripe" id="results">
          <thead>
          <tr>
            <th>Updated At</th>
            <th>Hotload</th>
            <th>Updated</th>
            <th>Origin</th>
            <th>Dest</th>
            <th>Pickup</th>
            <th>Delivery</th>
            <th>ltl</th>
            <th>Equipment</th>
            <th>Length</th>
            <th>Actions</th>
          </tr>
          </thead>

          <tfoot>
          <tr>
            <th>Updated At</th>
            <th>Hotload</th>
            <th>Updated</th>
            <th>Origin</th>
            <th>Dest</th>
            <th>Pickup</th>
            <th>Delivery</th>
            <th>ltl</th>
            <th>Equipment</th>
            <th>Length</th>
            <th>Actions</th>
          </tr>
          </tfoot>

          <tbody>
              <tr>
                <th>2014-10-20 18:05:41 UTC</th>
                <td>
                  <div align="center">
                        <img src="/assets/stopwatch.fw.png">
                  </div></td>
              <td><div align="center">29 days</div></td>
              <td><div align="center">St Louis Area, MO</div></td>
              <td><div align="center">Pine Bluff, AR</div></td>
                  <td>
                    <div align="center">2014-10-26
                    </div></td>
                  <td>
                    <div align="center">2014-10-27
                    </div></td>
              <td><div align="center">Full</div></td>
              <td>
                <div align="center">Reefer
                </div></td>
              <td><div align="center">53</div></td>
              <td>
                <div align="center" class="btn-group">
                  <a href="/hotloads/93260" class="btn btn-info">Show</a>
                  <a user_id="11940" id="" href="javascript:void(0)" class="hot_save btn">Save</a>
                  <a user_id="11940" href="javascript:void(0)" class="cover_link btn btn-primary">Cover</a>
                </div>
              </td>
              </tr>
              <tr>
                <th>2014-10-14 14:47:43 UTC</th>
                <td>
                  <div align="center">
                        <img src="/assets/stopwatch.fw.png">
                  </div></td>
              <td><div align="center">about 1 month</div></td>
              <td><div align="center">Springfield, MO</div></td>
              <td><div align="center">Gerald, MO</div></td>
                  <td><div align="center">TBD</div></td>
                  <td><div align="center">TBD</div></td>
              <td><div align="center">Full</div></td>
              <td>
                <div align="center">Reefer
                </div></td>
              <td><div align="center">48</div></td>
              <td>
                <div align="center" class="btn-group">
                  <a href="/hotloads/93259" class="btn btn-info">Show</a>
                  <a user_id="11940" id="" href="javascript:void(0)" class="hot_save btn">Save</a>
                  <a user_id="11940" href="javascript:void(0)" class="cover_link btn btn-primary">Cover</a>
                </div>
              </td>
              </tr>
          </tbody>
          </table>
    </div>
</div></div>

更新：

这就是我所拥有的：

它应该是这样的：

我的 jQuery 代码无法访问这些元素

jQuery ->
  $('#results').dataTable
    sPaginationType: "full_numbers"
    bJQueryUI: true
    lengthMenu: [[5, 10], [5, 10]]
    dom: '<"toolbar1">frtip'
    aaSorting: [[0, "desc"]]
    bSort: true
    columnDefs: [
      {
        targets: [ 0 ]
        visible: false
        searchable: false
      }
    ]
  $('#results1').dataTable
    sPaginationType: "full_numbers"
    bJQueryUI: true
    order: [[0, "desc"]]
    dom: '<"toolbar2">frtip'
    aaSorting: [[0, "desc"]]
    bSort: true
    columnDefs: [
      {
        targets: [ 0 ]
        visible: false
        searchable: false
      }
    ]
  $('#results_length').css("display", "none");
  $('#results1_length').css("display", "none");
  $("div.toolbar1").html('<img src="/assets/flame.fw.png" /> = Hotload <img src="/assets/stopwatch.fw.png" /> = Timed Load (timed Loads are good for 2 hrs)');
  $("div.toolbar2").html('<b>Theses are loads offered by other Shippers</b>');

对此的更新：

Barry T. Smith 的回调是正确的…… 我需要在 AJAX 调用成功后重建数据表。

可以通过以下几种方式做到这一点：

fnDrawCallback

或者顺便说一下我的做法：

var id = $('#id').val();
    $.ajax({
      url: "/searches/hotload_results/"+ id,
      type: "GET",
      success: function (data) {
        $("#hotload").append(data);
        $('#results').dataTable( {
          "sPaginationType": "full_numbers",
          "bJQueryUI": true, 
          "lengthMenu": [[5,10],[5,10]],
          "dom":'<"toolbar1">frtip',
          "aaSorting": [[0, "desc"]],
          "bSort": true,
          "columnDefs": [ {
             "targets": [ 0],
             "visible": false,
             "searchable": false
          } ]
        })
      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert('error: ' + textStatus + ': ' + errorThrown);
      }
    });

【问题讨论】：

仅供参考，$("#hotload").ready(...); 只是 $(document).ready(...); 的语法不正确
会解决这个问题，但仍然需要弄清楚如何能够访问 DOM 中的表
什么是不适合您的 javascript？
关于您的问题，将目标元素添加到 DOM 后有什么问题？是动态ID还是什么？我真的不确定你的问题
我需要的目标不在 SOURCE 中...我需要访问表

标签： javascript jquery html css ajax

【解决方案1】：

只要您的代码尝试在 AJAX 成功调用之后执行，您就应该能够访问通过 AJAX 添加的任何内容。

这可以像将 AJAX 调用放在绑定事件等的其他脚本之前一样简单。如果您在 $(document).ready() 获取 AJAX，您还可以将您的函数集移动到类似 @ 987654323@ 以确保它发生在 AJAX 之后。可能最好的方法是在 AJAX 方法的 .success 上调用回调函数。

对于点击、聚焦等事件，您可以使用event delegation

$('body').on('click', '#results', function(){
   // this does something when you click the table with id of results
});

基本上，在这种情况下，任何时候单击正文，它都会查看您单击的是否是 #results 元素，然后执行一些操作。

但总而言之，如果 jQuery 在加载到页面之前就在寻找$('#results')，它不会找到任何东西。等到 AJAX 之后，它应该可以工作了。

【讨论】：

AJAX 调用需要 10 - 15 秒才能完成，这就是我使用 ajax 的原因。这是一个正常的页面，加载需要 10 - 15 秒
那么这可能是正确的答案，因为您的代码以前依赖于初始页面加载时存在的那些元素。只需将与热加载部分相关的部分移动到单独的函数中，并在加载数据后调用该函数。
是的，如果需要那么长时间，你肯定会想在 AJAX 中使用回调函数。
很抱歉，我对 Jquery/Javascript/Coffeescript 很陌生，并且一直在研究所有内容，但点击事件我认为不会起作用，因为我希望加载结果。加载但找不到有效的 onload 事件。所以我选择了 $(document).ready
所以我需要在 ajax 上实现回调以尝试重新加载 $("result").datatable ？

【解决方案2】：

您将结果直接附加到 div，所以我的猜测是浏览器将其呈现为 html，但 jquery 将其视为字符串，而不是单个元素。如果您的控制器方法返回一个字符串，则可能是这种情况。

【讨论】：

那么有解决办法吗？这个解决方案可以实现吗？
请扩展您的答案以包含一些详细信息