点击按钮加载其他页面div内容时selectpicker属性失效问题

核心原因 #

你遇到的是典型的动态插入DOM后第三方组件未初始化的问题：

• jQuery load 方法会将请求返回的HTML插入到目标节点，子页面内的脚本虽然会执行，但bootstrap-select的默认自动初始化仅在页面首次DOM加载完成时触发，动态插入的select元素不会自动走初始化流程
• 如果主页面已经加载过bootstrap-select相关资源，子页面重复引入会导致组件实例冲突，反而触发功能失效

排查步骤 #

• 打开浏览器控制台的Console面板，检查是否有$().selectpicker is not a function类报错：如果存在，说明资源加载失败或者重复加载导致的方法丢失
• 子页面内容加载完成后，在控制台手动执行$('.selectpicker').selectpicker()，如果下拉框可以正常渲染，可直接确认是初始化时机的问题
• 切换到Network面板，筛选JS资源，确认bootstrap-select.min.js是否被重复加载，主页面已引入的情况下子页面无需再次引入

修复方案 #

1. 先移除buttonClickDetails.php中重复引入的bootstrap-select.min.js代码，避免资源冲突
2. 改写原load方法，添加加载完成回调，手动初始化selectpicker组件：

$("#maincont<?php echo $forwardInterviews; ?>").load("/xx/xx/xx/xx/xx/buttonClickDetails.php", function() {
  // 内容完全插入DOM后，手动初始化当前容器内的所有selectpicker
  $(this).find('.selectpicker').selectpicker();
  // 其他需要动态初始化的组件逻辑也可以放在此处执行
});

3. 如果需要给selectpicker绑定交互事件，使用事件委托绑定到已存在的父级节点，避免动态元素事件绑定失效：

// 绑定到load的目标容器，比绑定到body性能更好
$("#maincont<?php echo $forwardInterviews; ?>").on('change', '.selectpicker', function() {
  // 此处写事件触发后的逻辑
});

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