继续尝试功能，直到加载所需的 DOM 元素答案

【问题标题】：keep trying function until required DOM element is loaded继续尝试功能，直到加载所需的 DOM 元素
【发布时间】：2011-10-13 21:58:14
【问题描述】：

我正在通过XHR 将另一个页面加载到el。加载的页面上有js，除非页面上加载了所需的dom元素，否则会抛出错误并失败。因为它是 XHR .ready 等。人。不会工作。

我让它在 500 毫秒超时下工作，但这不行；一定有更好的方法。使用超时，dom el 并不总是加载并且页面失败。

页面上有一个硬编码的表格，带有id。页面中的脚本是一个 jquery 插件（数据表），除非加载了表，否则不会初始化。

我考虑过使用一个函数来初始化数据表内容并重复调用 while $('#tableID') 是 null 但不确定这是否正确。

<div id="contactQueue">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="contactsQueueTable">
    <thead>
        <tr>
            <th class="" rowspan="1" colspan="1" style="width: 185px; ">Contact Name</th>
            <th class="" rowspan="1" colspan="1" style="width: 148px; ">Bus. Name</th>
            <th class="" rowspan="1" colspan="1" style="width: 116px; ">Is Client</th>
            <th class="" rowspan="1" colspan="1" style="width: 165px; ">Remove</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>
<?php echo form_open('',array('id'=>'step2form','name'=>'step2form'));?>
<input type="hidden" name="clientID" value="<?php echo $clientID; ?>">
<?php echo form_close();?>


<script type="text/javascript" charset="utf-8">
console.log(jq('#currentContactsTable'))
while(jq('#currentContactsTable').html()==null){
    initXHRPage();
    console.log(jq('#currentContactsTable')+' not ready');
}
function initXHRPage(){
    //init tables stuffs
}

编辑；

问题是别的东西，有点。数据表的脚本正在通过getScript() 加载。元素正在正常加载，但 initDatatables() 在 getScript() 完成加载之前触发，而不是在加载 el 之前触发。

解决方法是在getScript()成功回调中调用initDatatables()函数：

<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
    console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
    initDatatable();
});
</script>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

你试过$(el).ready(...)吗？这当然应该奏效。如果不是，则有其他问题。

编辑

抱歉，应该是$("#your_xhr_loaded_content").ready()...。

我一直在做这种类型的事情并且它有效，我认为关键是我正在加载一个文档。

主 HTML 文档，index.html：

    ...
    <body>
        ...
        <div id="activity_content">
        </div>
        ...
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

main.js:

...

function ruleManagement.loadContent() {
    $.ajax({
        url: "subdocs/ruleMgmt.html",
            cache: false,
            success: function(html) {
                $("#activity_content").html(html);
            }
    }
}

ruleManagement.onReady = function(event) {
    // Init contents of the rule_management_pane
    ...
}

HTML 子文档，ruleMgmt.html

<div id="rule_management_pane">
    <!-- Content here -->
    ...
</div>
<script type="text/javascript" language="JavaScript">
    jQuery("#rule_management_pane").ready(ruleManagement.onReady);
</script>

如果我调用ruleManagement.loadContent()，则在成功加载 div#rule_management_pane 后调用ruleManagement.onReady()。我不能确定在将 div#rule_management_pane 插入 #activity_content 之前调用了 onReady，但我认为是这样。

【讨论】：

documentation 声明 .ready() 只能在文档上使用：.ready() 方法只能在匹配当前文档的 jQuery 对象上调用，因此选择器可以被省略。 那么$(el).ready(...) 是否有效？
虽然不起作用。页面加载时，el 还没有准备好，所以 ready(function(){//blah 没有运行。如果我用 setTimeout 500 替换 el.ready，它可以工作。
由于某种原因，它仍然不起作用。我不认为 XHR 有这么大的问题。页面是通过 XHR 加载的，但 Datatables 的东西不是；这是一个在创建表的 el 上调用的方法。 DTBLS 中有 XHR，但这也不是问题。问题是页面已加载，页面上的脚本（即 init 的数据表）在所述页面上的元素被渲染/创建之前运行，并且由于 el 不存在而停止。做jq('#currentContactsTable').ready(function(){initDatatables();}) 不起作用：Uncaught TypeError: Object [object Object] has no method 'dataTable' thx

【解决方案2】：

我如何理解您的 html/js 正在加载：

containerPage --> $.get(/ajax/getMiddlePage.php)
中间 XHR 页面 --> $.get(/ajax/getContactQueue.php)
中间 XHR 页面 --> $.get(/ajax/getCurrentContactsTable.php)

粗糙。好的，这就是我认为你需要的：

<html>
<!---CONTAINER PAGE--->
<head>
    <script type="text/javascript">
    //this .ready is to register events we need to catch the '#currentContactsTable' load event
    $(document).ready(function(){
    //ajaxSuccess is a global ajax function, you need to check ajaxOptions object to ensure you have the correct 'ajaxSuccess' you thought you did.
      $.ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions){
        if (ajaxOptions.url == '/ajax/getCurrentContactsTable.php') {
          $('#currentContactsTable').trigger('initDataTables');
        }
      });
// .live() does not need the element to exist on document.ready()
      $('#currentContactsTable').live('initDataTables', function(event){
          var dataTables = $(this).datatables({options:here});
      });
    });
    </script>
</head>
<body></body>
</html>

【讨论】：

我离开了开发环境来运行它，但是，.live() 和 'ajaxSuccess' 或 'ajaxComplete' jquery 全局 ajax 事件的组合是我要走的路寻求解决方案
也许我只是很密集，但这将如何解决问题？页面本身是从 XHR 请求加载的，我尝试在它的 onComplete 回调上执行数据表初始化，但遇到了同样的问题。您的解决方案是验证调用数据表页面的 XHR 成功，对吗？谢谢。
此 javascript 进入“容器页面”。 XHR 被加载到某个“容器页面”中。即使接收新内容的整个“容器页面”被完全重写，document.ready() 仍然适用于原始 DOM。
确实很粗糙。这是一个类似桌面的应用程序 (mochaUI)，所以有很多 XHR。这个页面是Desktop->XHR->Page2->XHR->ContactsPage；这就像 INCEPTION，但情节更好。正如您所说，live() 不需要 el 存在，但 Datatables 需要。这确实是问题所在——数据表会在它的 div 被创建之前初始化并且因为 div 不存在而犹豫不决。我认为 ready 不能正常工作，因为正如您所说，文档（index.php 或其他）的 OG .ready() 是正确的，并且任何 XHR 页面上的任何 doc.ready 参见 index.php 中的 .ready()==true 和 don不要开火。谢谢回复。

【解决方案3】：

这就是我想出的。感谢受访者寻求帮助。

initPage();

function initPage(){
    if(jq('#currentContactsTable').length==1){
            initDatatable();
    }else{
            window.setTimeout(function(){
                    initPage();
            },250);
    }
}

function initDatatable(){
    jq('#currentContactsTable').dataTable( {
            //REST OF DATATABLE STUFF...

它可能不是超级漂亮，因为它仍然依赖于超时，但至少这个超时它更健壮一些......

^^^^ BZZZZZZZZZ

问题是别的东西，有点。数据表的脚本正在通过 getScript() 加载。元素正在正常加载，但 initDatatables() 在 getScript() 完成加载之前触发，而不是在加载 el 之前触发。

解决方法是在 getScript() 成功回调中调用 initDatatables() 函数：

<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
    console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
    initDatatable();
});
</script>

【讨论】：