.load() 之后的 DOM 操作答案

【问题标题】：DOM Manipulation After .load().load() 之后的 DOM 操作
【发布时间】：2014-02-14 13:24:09
【问题描述】：

尝试使用Rainbow.js 进行语法高亮。我有一个分页导航，当被点击时，将页面（#page2）加载到body。它工作得很好，但是当我调用 Rainbow.color() （它在 DOM 中搜索预定义的 pre 标签内的语法）时，它无法着色。当页面第一次加载时，我调用这个事件：

$(window).load(function() {
    /* Act on the event */
    Rainbow.color();
});

而且效果很好！但是当我调用这个函数时，Rainbow.color() 并没有突出任何东西！

$('.pure-paginator .pure-button').on('click', function () {
    $('#content').load('html.html ' + $(this).attr('href'));
    Rainbow.color();
});

感谢您的帮助，如果您需要更多代码，请告诉我！

【问题讨论】：

标签： javascript jquery html ajax dom

【解决方案1】：

Ajax 是异步的。将您的调用放入 ajax 回调中：

$('.pure-paginator .pure-button').on('click', function () {
    $('#content').load('html.html ' + $(this).attr('href'), function() {
        Rainbow.color();
    });
});

【讨论】：

真的这么简单吗？呜呜呜……哈哈。我不知道 .load() 方法还有第二个字段。谢谢！
我正在查看 .load 文档，我只是认为它仅对 console.log 有用，用于测试目的。
啊，不，一般来说（特别是这里），回调是在任务（无论是 ajax 调用、动画等）完成后运行的函数。