原型Event.observe看不到AJAX返回的HTML

Question

我正在尝试使用Prototype的库基于AJAX创建CMS系统。 在页面加载时，我具有HTML，页面标题和通过JSON返回的页面的其他Javascript，并在主区域更新了HTML。 我还有一个事件侦听器，用于侦听要单击的某些ID。

听众正在工作，

var TabMenu = {
selectedTab: 'main',
showTab: function(pid) { alert(pid); alert($(pid)); 
    $(pid).addClassName('selected'); this.selectedTab = pid;
    $(this.defaultTab).removeClassName('selected');
}};

加载后，我单击一个新选项卡，第一个“测试”警报成功警报了元素的ID，但是第二个警报（$（pid））返回null。 我只能推测AJAX请求返回的HTML没有被评估并添加到DOM中，否则它将警告[HTMLDivElement]而不是“空”。

这是相关的AJAX调用：

        new Ajax.Request(url, {
        onSuccess: function(t) {
            data = t.responseText.evalJSON();
            Page.update(data.html, data.title, data.js);
            Page.destroyLoader();
        }
    });

这是更新功能：

update: function(data, title, js) {
    document.title = Global.title + title;
    if (title != "") { $('HEADING').update(title); }
    $('MAIN').update(data);
    if (js != "") {
        var nuJS = new Element('script', { type: 'text/javascript' }).update(js);
        $('MAIN').insert({ top: nuJS });
    }
}

关于如何使它起作用的任何想法？

Answer 1

Ajax请求何时触发？ 单击选项卡时是否触发？ 如果是这样，则在将数据插入DOM之前会触发showTab函数。

如果您有Firebug，请在ajax调用完成后尝试使用控制台选择html数据，以查看得到的结果。 您还可以使用Firebug的html标签查看数据是否已插入DOM中。

另外，即使您获得了设置为值的pid参数，它是否引用了DOM中存在的真实ID？

Answer 2

根据您的代码和上面的注释。 我认为您的计划是在页面立即加载后加载所有选项卡。 并使用css隐藏所有它们。 等到用户单击选项卡，仅显示“选定”的选项卡，对吗？

这意味着您应该更改：

$('MAIN').update(data);

像

$('MAIN').update({after: data});

因此它不会覆盖现有的。 并且不要忘记将document.title和eval js的代码移到showTab函数中。

对于javascript评估，您可以将js插入data.html并改用它：

$('MAIN').innerHTML.evalScripts();