原型 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] 而不是“null”。

这是相关的 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();