如何让jQuery绑定的点击事件对新追加的DOM元素也生效？

问题原因 #

你当前使用的直接事件绑定方式，仅会对代码执行时已经存在于DOM中的.lightbox_trigger元素生效，后续动态插入到页面的同类元素不会被自动绑定该点击事件。

解决方案 #

使用jQuery的事件委托机制，将事件绑定到始终存在的父级元素（优先选择距离目标元素最近的静态父容器，无特殊场景时可直接用document），再通过选择器匹配触发事件的目标元素即可。

修改后的完整代码如下：

jQuery(document).ready(function($) {
  // 将事件委托绑定到document，可替换为页面内包裹所有lightbox_trigger的静态父容器提升性能
  $(document).on('click', '.lightbox_trigger', function(e) {
    e.preventDefault();
    var url = $(this).attr("href");
    
    // 优化：避免重复插入id为lightbox的元素，先判断是否已存在，不存在再创建
    if ($('#lightbox').length === 0) {
      var lightbox = 
        '<div id="lightbox">' +
          '<div id="boxcontent">' +
            '<div id="lightp"></div>' +
          '</div>' +  
        '</div>';
      $('body').append(lightbox);
    }
    
    $.get(url, function(data){
      $("#lightp").html(data);
    });
  });              
});

对应的触发元素不需要修改，保持原有结构即可：

<a href="somepage.html" class="lightbox_trigger">Click here</a>

内容的提问来源于stack exchange，提问作者user9638079