Question

在我的HTML中，我有一个像这样的表格骨架：

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

此外，我有一个<div id="content"></div>，稍后将会使用。

我使用$.ajax()请求以动态方式在表格主体中填充行和列。表格中的每个单元格都填充了一个<a href="#">some link here</a>。通过单击其中一个链接，向服务器发出另一个$.ajax()请求，并将更多数据放入div#content。由于链接是动态加载的，我使用事件委托如下：

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

所有这一切都很好。现在，问题在于：我追加到div#content的一些数据是由<pre></pre>标记包围的html源代码。我想使用snippet jQuery syntax highlighting plugin突出显示此源代码。根据事件授权规则，这应该在理论上起作用：

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

我的问题是，我不知道我应该将事件处理程序绑定到哪个JavaScript事件。基本上，我只是想在加载后突出显示我的代码片段，但似乎没有适合此处的JavaScript事件，因为jQuery的load()和ready()方法用于不同的目的。我该怎么做才能突出我动态加载的HTML代码？

Answer 1

你试过了吗？

$('#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');
        }
    });    
});

Answer 2

你不需要任何事件......只需使用find在ajax success函数中获取<pre>标记在内容被追加之后......这样...... DOM元素已经被添加到文档中......并且能够找到那个

success:function(response){
  ....//your stuff;
  $('#content').find('pre').snippet('html');
 }

Answer 3

你为什么不试试：

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

将事件处理程序绑定到哪个事件？

3 个答案: