如何让 IE6 通过 jQuery insertAfter() 识别插入的 DOM 元素答案

【问题标题】：How to get IE6 to recognize inserted DOM elements via jQuery insertAfter()如何让 IE6 通过 jQuery insertAfter() 识别插入的 DOM 元素
【发布时间】：2011-01-15 06:46:35
【问题描述】：

我有一个查询数据库服务器以查看是否有新记录的 jquery ajax 函数。如果是这样，它会使用以下方法在记录列表的顶部插入新记录（具有唯一 ID）：

$(new_records).insertAfter('#div_at_top_of_page');

即使在 IE6 中也可以正常工作。

但是，每个插入的记录都有一个辅助 ajax 函数来获取有关该记录的更多详细信息并将其插入到插入元素内的元素中。

这适用于所有浏览器除了 IE6。 IE6 执行辅助 ajax 功能（我已经确认），但不插入内容。它静默失败，不会抛出任何错误。

我假设这是因为 IE6 看不到 DOM 中插入的元素；但无论如何，我将不胜感激有关如何解决此问题的任何想法。

编辑 2 - 我在下面的第一次编辑中添加的代码似乎运行良好。问题是 IE6 不知道 $('#inserted_data_' + log_id) 存在。这是使用上述.insertAfter() 方法插入的元素。

编辑 - 用于插入辅助数据的代码：

$('.printout').live('click', function(ev) {
    ev.preventDefault();
    var ajaxUrl = $(this).attr('href');
    $.ajax({
        url: ajaxUrl,
        cache: true,
        dataType: 'json',
        success: function(j, textStatus) {
            var printout = j.printout;
            alert(printout); // sanity check
            var log_id = ajaxUrl.replace('/api/fetch_data/printout/', '');
            $('#inserted_data_' + log_id).html(printout); // problematic line
        }
    });
    return false;  
});

正如我所指出的，该函数执行正确，正如 // sanity check 所证实的那样，但上面提到的带有注释 // problematic line 的行实际上并未将数据写入 '#inserted_data_' + log_id 元素。

【问题讨论】：

提供一些代码来说明第二次 ajax 调用是如何以及何时发生的，以便我们评论..

标签： jquery dom internet-explorer-6

【解决方案1】：

我敢打赌，问题出在您的 log_id 变量上。我猜你的replace 的行为不符合预期。在那里再做几次健全性检查，如果他们指出你正确的方向，请告诉我......

var log_id = ajaxUrl.replace('/api/fetch_data/printout/', ''); 
alert(log_id);  // Show the log_id variable

var el = $('#inserted_data_' + log_id);
alert("Element found: " + (el.length > 0)); // Did it find the element?

el.html(printout); // problematic line

【讨论】：

额头拍打就是这样！ IE6 在 ajaxUrl 中包含完整的 URL（包括 htp://domain.com/） - 但在通过前一个 ajax 函数插入的元素的 URL 中仅。我很确定它与 IE6 的 DOM 有关系，所以我不认为要证实这一点。感谢您的帮助！

【解决方案2】：

您的结果集有多长，因为 IE 会阻塞大量数据..
reference

还要确保您的 json 数据没有与您的 html 页面中的 ID 相同的变量名称..
reference

【讨论】：

感谢您的回复。数据集非常小，$('#inserted_data_' + log_id) 存在。 :(
尝试提醒$('#inserted_data_' + log_id).length 看看它是否找到任何东西..

【解决方案3】：

由于某种原因，jQuery ajax() 调用在无法评估 JSON 时会静默失败（我曾多次遇到此行为），并且回调函数未执行。确保 IE6 可以解析服务器返回的 JSON 字符串。

更新要对此进行测试，请尝试在第 3724 行插入这些警报（jQuery 1.3.2）

if ( type == "json" ) {
    alert('a');
    data = window["eval"]("(" + data + ")");
    alert('b');
}

如果我的假设正确，您将看到“a”警报，但不会看到“b”警报。

【讨论】：

感谢您的回复，但我很确定不是这样。它仅在 IE6 上失败，并且仅在对先前插入的元素的 ajax 调用上失败。此外，// sanity check 警报确实有效。
完成阅读问题。他在那里进行了健康检查。

【解决方案4】：

不应该

$('#inserted_data_' + log_id).html('printout'); // problematic line

成为

$('#inserted_data_' + log_id).html(printout); // problematic line

?

【讨论】：

是的，很抱歉 - 已修复。错字仅出现在我粘贴到问题中的函数中，而不是原始函数中。

【解决方案5】：

一些建议，因为我无法真正复制他们只是猜测的情况，但我会尝试将$('#inserted_data_' + log_id).html(printout); 换成$(document).ready(function() { $('#inserted_data_' + log_id).html(printout); });。我在想，在 IE6 完成添加前一个元素之前，DOM 可能处于未就绪状态。

如果不是，我会尝试在该行上使用超时 setTimeout(function() { $('#inserted_data_' + log_id).html(printout); },10); 我知道这有点难看，但如果它有效，您可以添加一个 if 来仅为 IE6 执行此操作。

另外，代替alert(printout); // sanity check 检查alert(document.getElementById(inserted_data_'+log_id)); 以确保元素已经存在并且具有正确的ID（也许IE6没有插入具有正确属性的元素，看到name属性的问题相当几次）

【讨论】：

>另外，而不是alert(printout); // sanity check 检查alert(document.getElementById(inserted_data_'+log_id)); 这是问题所在：IE6 只是看不到插入的元素。

【解决方案6】：

你可以试试这个：http://code.google.com/p/ie7-js/ -- 很时髦

【讨论】：