jQuery on(close,callback)机制及Materialize多下拉菜单事件绑定异常咨询

嗨，我来帮你拆解这个有点反直觉的Materialize下拉事件问题～

为什么会出现“绑定第一个下拉，关闭第二个也触发回调”的情况？ #

核心原因是Materialize的下拉菜单事件是基于事件委托实现的，默认情况下它把close这类事件绑定在全局（比如document）或者下拉的父容器上，而不是直接绑定在单个下拉触发元素上。所以哪怕你通过get[0]选中第一个下拉元素绑定事件，当关闭第二个下拉时，事件冒泡会触发全局的委托事件，导致你的回调被执行——本质上你绑定的事件并没有被Materialize的实例正确“接管”，而是走了原生的事件冒泡逻辑。

正确的单下拉事件绑定方式 #

要精准给每个下拉菜单绑定独立的close事件，必须通过Materialize提供的下拉实例来操作，而不是直接给DOM元素绑定原生事件。

原生JS写法

// 初始化第一个下拉并获取实例
const dropdownInstance1 = M.Dropdown.init(document.getElementById('dropdown-trigger-1'), {
  // 你的下拉配置项，比如 hover: false 等
});

// 给第一个实例绑定close事件
dropdownInstance1.on('close', () => {
  console.log('第一个下拉菜单关闭了！');
});

// 第二个下拉同理
const dropdownInstance2 = M.Dropdown.init(document.getElementById('dropdown-trigger-2'));
dropdownInstance2.on('close', () => {
  console.log('第二个下拉菜单关闭了！');
});

jQuery版本写法

如果你用的是Materialize的jQuery封装，写法更简洁：

// 初始化并绑定事件
$('#dropdown-trigger-1').dropdown().on('close', function() {
  console.log('第一个下拉关闭');
});

$('#dropdown-trigger-2').dropdown().on('close', function() {
  console.log('第二个下拉关闭');
});

顺便解决你最初的工作问题：“多个下拉仅第一个绑定生效” #

你之前遇到的“只有第一个下拉的close事件生效”，大概率是直接用了document.querySelector('.dropdown-trigger').addEventListener(...)——querySelector只会返回第一个匹配的元素，其他下拉元素根本没绑定事件。改用上面的实例绑定方式，循环遍历所有下拉元素并逐个初始化绑定，就能解决这个问题：

// 批量处理所有下拉菜单
document.querySelectorAll('.dropdown-trigger').forEach(trigger => {
  const instance = M.Dropdown.init(trigger);
  instance.on('close', () => {
    console.log(`ID为${trigger.id}的下拉关闭了`);
  });
});

这样每个下拉的close事件都会独立触发对应的回调啦～

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