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

时间:2010-02-10 13:44:26

标签: jquery dom internet-explorer-6

我有一个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元素。

6 个答案:

答案 0 :(得分:1)

您的结果设置了多长时间,因为IE会对大量数据进行扼流..
reference

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

答案 1 :(得分: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 

答案 2 :(得分:0)

出于某种原因,jQuery ajax()调用无法在无法评估JSON时失败(我已多次遇到此行为),并且不执行回调函数。确保IE6可以解析服务器返回的JSON字符串。

更新要对此进行测试,请尝试在第3724行(jQuery 1.3.2)插入这些警报

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

如果我的假设是正确的,你会看到'a'警告而不是'b'警告。

答案 3 :(得分:0)

不应该

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

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

答案 4 :(得分:0)

一些建议,因为我无法真正复制他们猜测的情况,但我会尝试将行$('#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没有插入具有正确属性的元素,看到该问题与名字属性很多次)

答案 5 :(得分:0)

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