jQuery插件没有应用于$ .ajax动态内容？

Disclaimer: I know this type of question has been asked here before, I just can't seem to find it. I have tried searching for a bunch of different $.ajax dynamic + live() type stuff but can't find the solution, anyway, here is the problem.

免责声明:我知道之前已经问过这类问题,我似乎无法找到它。我试过搜索一堆不同的$ .ajax动态+ live()类型的东西,但无法找到解决方案,无论如何,这是问题所在。

Problem:

I am building a site where I can save my pieces of code. I am having the content pulled from a database via $.ajax. Here is the website: InsanelyWeb.com the select box options content is also dynamic. Try the options HTML > DOCTYPE > HTML4 Strict (as that is the only one working right now.)

我正在构建一个可以保存我的代码片段的站点。我通过$ .ajax从数据库中提取内容。这是网站:InsanelyWeb.com选择框选项内容也是动态的。尝试选项HTML> DOCTYPE> HTML4 Strict(因为这是唯一正在使用的选项。)

As you can see, there is static content that has the SyntaxHighlighter plugin getting applied. But when I follow the above select options, and data is pulled from the database, it loses the plugin. I am assuming it is because the content is dynamic and I can't have stuff applied to it. This is the code I have.

如您所见,有静态内容可以应用SyntaxHighlighter插件。但是当我按照上面的选择选项,并从数据库中提取数据时,它就会丢失插件。我假设这是因为内容是动态的,我不能应用它的东西。这是我的代码。

jQuery:

$('#labels').live('change', function() {
    getScripts();
});

$.ajax({
    url: './db_scripts/get_scripts.php',
    success: function( data ) {
        var dataObj = jQuery.parseJSON( data );
        $.each(dataObj, function() {
            $('#code').html( this.code );
        })
        highlighter(); //after success, initiates highlighter 
    },
});

function highlighter() {
    SyntaxHighlighter.all();
}

Question:

How can I have the plugin applied to dynamic content? I have tried async: false but I don't think that is the solution. Thank you very much for your time.

如何将插件应用于动态内容?我尝试过async:false但我不认为这是解决方案。非常感谢您的宝贵时间。

Solution:

Explain (very nicely) below:

在下面解释(非常好):

function highlighter() {
    SyntaxHighlighter.highlight()
}

1 个解决方案

#1

As far as I see the problem is that the hightlight function is called just once (on window.load).

据我所知,问题是hightlight函数只被调用一次(在window.load上)。

Try to call the SyntaxHighlighter.highlight() function yourself in your ajax callback function.

尝试在ajax回调函数中自己调用SyntaxHighlighter.highlight()函数。

Update (elaboration):

SyntaxHighlighter.highlight() is the function that highlight all elements on the page that are marked as SyntaxHighlighter source code.

SyntaxHighlighter.highlight()是突出显示页面上标记为SyntaxHighlighter源代码的所有元素的函数。

SyntaxHighlighter.all() just register the highlight() function for the window.load event. I think it's to be sure that the DOM is loaded before appling the SyntaxHighlighter.

SyntaxHighlighter.all()只是为window.load事件注册highlight()函数。我认为在应用SyntaxHighlighter之前确保已加载DOM。

If you call SyntaxHighlighter.all() more than once, it just registers the highlight() function once more. Because your are doing an ajax request, the window.load event isn't fired anymore. So you can call SyntaxHighlighter.highlight() directly.

如果多次调用SyntaxHighlighter.all(),它只会再次注册highlight()函数。因为您正在执行ajax请求,所以不再触发window.load事件。所以你可以直接调用SyntaxHighlighter.highlight()。

#1