着陆页用户操作后加载外部JS，如何为新增类绑定ColorBox？

嘿，这个场景太常见了——动态加载的元素总是能让直接绑定的插件“失灵”，不过别担心，有几个实用的办法能搞定ColorBox的这个问题：

方法一：事件委托（最推荐） #

因为动态生成的元素在页面初始加载时不存在，直接给它们绑定ColorBox肯定没用。我们可以把事件绑定到页面一开始就存在的父元素上（比如document或者更具体的容器），利用事件冒泡来触发ColorBox：

// 给初始就存在的父元素绑定点击事件，监听目标元素的类
$(document).on('click', '.your-dynamic-class', function(e) {
  e.preventDefault(); // 阻止链接的默认跳转行为
  // 手动触发ColorBox，传入对应的配置和链接
  $.colorbox({
    href: $(this).attr('href'),
    width: '70%',
    height: '70%',
    // 这里可以添加你需要的其他ColorBox配置项
    inline: false,
    opacity: 0.8
  });
});

这个方法的好处是：不管你的动态元素什么时候加载进来，只要点击它，事件都会冒泡到父元素，进而触发ColorBox，不需要重复绑定。

方法二：动态内容加载完成后手动初始化 #

如果你能控制外部JS的加载时机（比如有回调函数，或者知道AJAX请求什么时候完成），那就在动态元素渲染完成后，重新调用ColorBox的初始化方法：

// 举个例子：用jQuery加载外部JS，加载完成后初始化ColorBox
$.getScript('your-external-script-url.js', function() {
  // 外部JS加载完毕，动态元素已经出现在DOM里了
  $('.your-dynamic-class').colorbox({
    // 你的配置项
    inline: true,
    closeButton: true
  });
});

如果是通过AJAX加载的动态内容，就在AJAX的success回调里执行这段初始化代码，确保元素已经存在后再绑定。

小提示 #

• 尽量不要用document作为父元素，找最接近动态元素的、初始就存在的容器，这样事件触发的效率更高；
• 如果动态元素会被多次加载（比如分页加载），事件委托的方法不需要重复执行，而手动初始化的话每次加载后都要调用一次；
• 检查一下你的ColorBox版本，确保和jQuery版本兼容，避免出现奇怪的bug。

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