Question

In my HTML, I have a table skeleton like this:

<table>
    <thead id="table-headings"></thead>
    <tbody id="table-body"></tbody>
</table>

Additionally, I have a <div id="content"></div> that will be used later on.

I fill the table body with rows and columns in a dynamic way using $.ajax() requests. Each cell in the table gets filled with a single <a href="#">some link here</a>. By clicking on one of the links, another $.ajax() request to the server is done and more data should be placed into div#content. Since the links were loaded dynamically, I use event delegation like so:

$('#table-body').on('click', 'a', function(event) {
    $.ajax({
        // some settings here
        success: function(response) {
            // Append some data to the content div
            $('#content').append(...);
        }
    });    
});

All of this works fine. Now, here is the problem: Some of the data that I append to div#content is html source code surrounded by <pre></pre> tags. I want to highlight this source code using the snippet jQuery syntax highlighting plugin. According to the event delegation rules, this should work in theory by doing:

$('#content').on('...', 'pre', function(event) {
    $(this).snippet('html');
});

My problem is, I don’t know which JavaScript event I should bind my event handler to. Basically, I just want to highlight my code snippets once they have been loaded, but it seems there is no JavaScript event that fits here since jQuery’s load() and ready() methods are meant for different purposes. What can I do to highlight my dynamically loaded html code?

Answer 1

Have you tried:

$('#table-body').on('click', 'a', function(event) {
    $.ajax({
        // some settings here
        success: function(response) {
            // Append some data to the content div
            $('#content').append(...);
            $('#content').find('pre').snippet('html');
        }
    });    
});