Javascript 对随后创建的元素执行某些操作

我正在编写一个简单的Django支持的记事本应用程序，并使用它进行标记和语法突出显示：

因此，当您单击其中一个注释时，它将显示在最右侧的区域中。当前的工作方式如下：每当您单击其中一个注释时，就会触发一个AJAX请求，该请求将调用呈现页面特定部分的Django视图：

$(document).ready(function() {
  $(document).on('click', '.note', function() {
    let clickedNote = $(this);
    const pk = clickedNote.attr('id');
    const url = Urls['notes:show-note']();
    $.ajax({
      url: url,
      data: {
        'pk': pk
      },
      success: function(response) {
        $('.note-container').html(response);
        $('.note').each(function() {
          $(this).css({'background-color': 'white'});
        });
        clickedNote.css({'background-color': '#F9FAFC'});
      }
    });
  });
});

以下是示例响应在呈现时的样子：

<div class="note-container">
  <h3>small Python snippet</h3>
  <div class="description martor-preview">
    <h1>Small Python snippet</h1>
    <pre>
      <code class="python">
        class App(tk.Frame):
            def spam(self):
                return 'eggs'
      </code>
    </pre>
  </div>
</div>

小Python片段
小Python片段

类应用程序（tk.Frame）：
def垃圾邮件（自我）：
返回“鸡蛋”

我的问题是页面的这一部分没有突出显示语法，因为元素是随后创建的。以下是我当前突出显示代码块的方式：

  $.ajax({
    ...
      success: function(response) {
        $('.note-container').html(response);

        ...

        // *** syntax-highlight new <pre> tags ***
        $('.note-container pre').each(function(i, block) {
          hljs.highlightBlock(block);
        });

      });
    ...

$（文档）.ready（函数（）{
$（'pre'）。每个（函数（i，块）{
高亮度块（块）；
});    
});

…因此在此之后创建的元素不会高亮显示。我想知道如何处理新创建的元素，即如何突出显示随后创建的代码块？

在每次ajax响应后（即在ajax成功处理程序中），需要调用hljs语法高亮显示程序：

$.ajax({
...
成功：功能（响应）{
$（'.note container'）.html（响应）；
...
//***语法突出显示新标记***
$（'.note container pre'）。每个（函数（i，块）{
高亮度块（块）；
});
});
...

我建议尝试DOM变异Observer@ControlAltDel不需要DOM变异观察者，因为他可以简单地突出显示ajax成功处理程序中的代码。

  $.ajax({
    ...
      success: function(response) {
        $('.note-container').html(response);

        ...

        // *** syntax-highlight new <pre> tags ***
        $('.note-container pre').each(function(i, block) {
          hljs.highlightBlock(block);
        });

      });
    ...