自定义jQuery无法在featherlight.js弹窗中运行的技术求助

我之前也碰到过一模一样的情况，核心问题其实是Featherlight的动态加载机制——它会把弹窗内容动态插入到DOM中，而你在页面加载时执行的Autocomplete初始化代码，只能绑定当时已经存在的元素，没法作用到后来才出现的弹窗内输入框。

给你几个具体的解决步骤：

1. 利用Featherlight的afterContent回调初始化插件 #

Featherlight自带了多个生命周期回调，其中afterContent会在弹窗内容完全加载并插入DOM后触发，这时候初始化Autocomplete就刚好合适：

$(document).ready(function() {
  // 初始化Featherlight时绑定回调
  $('.featherlight-trigger').featherlight({
    afterContent: function() {
      // 用Featherlight的上下文定位弹窗内的输入框，避免全局选择器冲突
      this.$content.find('#autocomplete').autocomplete({
        source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"],
        minLength: 2
      });
    }
  });
});

这里用this.$content.find()来定位弹窗内的元素，比直接用ID选择器更稳妥，能避免页面内有重复ID导致的冲突。

2. 不要依赖页面加载时的全局初始化 #

别只在$(document).ready()里一次性初始化所有Autocomplete，因为动态生成的弹窗元素在页面加载时还不存在，必须等它们被插入DOM后，再针对弹窗内的元素单独初始化一次。

3. 检查插件加载顺序与DOM结构 #

确保jQuery和Autocomplete的脚本在Featherlight之前加载，同时确认弹窗内容里的输入框结构和内嵌时完全一致，没有因为Featherlight的内容处理逻辑导致DOM结构被意外修改。

按照这个方法调整后，弹窗里的Autocomplete应该就能正常工作了。

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