prettyPrint()只生效一次.(google-prettify)

Question

我有这个JavaScript (jQuery):

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('.prettyprint').text(file_contents[key]);
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
            prettyPrint();
    });
});
// Variables have been set in code not shown, irrelevant to problem.
// prettyPrint() is called everytime the #viewFileModal is shown,
// but its effect is only felt once.

所以prettyPrint()是调用每次viewFileModal模式框(由Bootstrap提供)显示，这只是，它似乎只有一个效果每次页面加载。

我试过在使模态框出现后注释出prettyPrint()并进入JS控制台。它确实只在第一次显示该框时起作用(每次页面加载)。

任何想法?这件事我已经纠结了一段时间了。我还尝试在viewFile函数中调用prettyPrint();但效果是一样的。

谢谢你。

山姆。

Answer 1

调用"prettyPrint()"将一个类添加到您的PRE标签中，命名为" prettyprinting "。下面这行代码将删除页面上"prettyprinting"类的所有实例，以便prettyPrint()函数可以重新美化您的PRE标记。这可以在中完成，而无需动态地向div添加PRE标记。

$('.prettyprinted').removeClass('prettyprinted');

Answer 2

感谢Matei。解决办法就是变成这样。也就是说，动态地添加整个pre，而不仅仅是文本。

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('#fileblock').html('<pre class="prettyprint">' + file_contents[key] + '</pre>'); // fileblock is a div.
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
        prettyPrint();
    });
});

:)

Answer 3

Joseph Poff的答案是正确的，但是你要小心。prettPrint()将所有内容包装在扫描标记中。如果删除了prettyprinting类，则没有删除scan标记。除非您正在清除pre的内容(或剥离所有扫描标签)，否则每次调用prettyPrint()时，您都会添加扫描标签，这将包装旧的扫描标签。它会很快失去控制。