在 Internet Explorer 中对从 Ajax 加载的代码使用 JQuery 方法答案

【问题标题】：Using JQuery methods on Code Loaded From Ajax in Internet Explorer在 Internet Explorer 中对从 Ajax 加载的代码使用 JQuery 方法
【发布时间】：2011-04-01 19:25:11
【问题描述】：

我有一个包含侧面板和中心 div 的页面。当主页加载时，它会填满侧面板并进行 ajax 调用以获取中心 div 的适当内容。加载 ajax 内容后，我使用两个 jquery 插件 - 一个用于选项卡，另一个用于表单。在 Firefox 和 chrome 中，一切正常。但是，在 Internet Explorer 8 中，我得到了可爱的错误：对象不支持此属性或方法。

var url = '/instances/edit/' + instance_id + '/1';


$('#frame_content').load(url, function() {

    $("ul.tabs").tabs("div.panes > div.pane", {history:true});
    $('#InstanceEditForm').ajaxForm(function(responseText) {

            ....

    });

});

我尝试删除 tabs 调用和 ajaxForm 调用并单独尝试它们，但它们都失败了。我注意到，如果编辑页面根本不加载任何内容，则选项卡和 ajaxForm 会以相同的方法调用；所以我的第一个预感是这是一个时间问题，而必要的 Dom 元素还没有加载。但是，在调用选项卡之前发出警报并没有帮助。在由 ajax 调用呈现的页面上使用 jQuery 调用时，我应该做些什么神奇的事情？

【问题讨论】：

进一步测试显示标签 ul 已加载。我可以在调用 $("ul.tabs").tabs("div.panes > div.pane", {history:true}); 之前提醒它的 id。失败。

标签： jquery ajax forms tabs

【解决方案1】：

您应该包装该代码，以便在 DOM 完全加载后执行：

$(function () {
 // Put code here
});

http://api.jquery.com/ready/

【讨论】：

试过了。也试过 $(document).ready(function() { 没有运气。

【解决方案2】：

我会说你是对的，因为没有加载 DOM 元素，回调函数在 AJAX 调用成功后立即运行，这可能发生在页面完全加载之前。是否可以将这些函数添加到 IFRAME HTML 并使用 $(document).ready(function() { .. }); 调用它们；

【讨论】：

【解决方案3】：

嗯，经过几个小时的工作，我终于把一切都搞定了。这是一连串的事情。

标签的 javascript 文件包含在包含标签的页面上。 ajax 调用后，这些包含文件未包含在 IE 中。因此，第一步是将包含文件移到主页。然后，我的标签就起作用了。
但是，表单不会提交。我将它转换回常规形式，没有 ajax 提交，它仍然无法正常工作。进一步检查表明，使用 jquery.html() 方法填充 div 正在剥离 IE 中的表单标签。此外，表单标签上方的所有内容也都被删除了。我最终改用了普通的旧 javaScript innerhtml。然后，当然，渲染选项卡的调用很快又失败了。
因此，渲染选项卡的调用（我在之前的故障排除期间已移至由 ajax 调用呈现的页面）必须返回。

而且，最终代码如下：

$('#flashMessage').css('display', 'none');
    var nav_url = '/instances/get_sections/' + instance_id;
    var stop = 0;
    $('#navigation').load(nav_url, function() {


        var url = '/instances/edit/' + instance_id + '/1';

        $.get(url, function(data) {

            document.getElementById('frame_content').innerHTML = data;
            $("ul.tabs").tabs("div.panes > div.pane", {history:true});
        });
    });

【讨论】：