jQuery点击事件未触发：动态链接的加载框隐藏代码失效

看起来你已经找对了事件委托的方向（因为是动态元素，必须用document级别的委托），但问题出在时机和事件传播的优先级上——你的hide()可能执行得太晚，或者原有的加载框显示逻辑根本没被你拦截住。

我来拆解一下问题和对应的解决办法：

核心问题分析 #

通常这种全局加载框的逻辑，是在document或者某个父元素上绑定了所有<a>标签的点击事件，用来触发加载框显示。你的事件委托虽然绑定了，但事件冒泡的顺序是：先触发元素本身的事件，再向上冒泡到父元素、document。但如果原逻辑是同步显示加载框，你的$('.loaderBox').hide()执行时，可能加载框还没被创建出来；或者原逻辑执行后又把加载框显示了一遍，覆盖了你的hide操作。

方案1：从根源阻止加载框触发（推荐） #

既然你的链接标记了no_loaderbox类，那我们直接阻止事件向上冒泡，让上层的通用加载逻辑根本不会被触发，这比事后隐藏要高效得多：

$(document).ready(function() {
  $(document).on('click', 'a.no_loaderbox', function(e) {
    // 阻止事件冒泡到上层元素，拦截全局加载逻辑
    e.stopPropagation();
    
    // 如果你不需要这个链接执行默认跳转（比如只是触发JS逻辑），可以再加一行：
    // e.preventDefault();
  });
});

方案2：确保加载框存在后再隐藏 #

如果因为某些原因不能阻止冒泡，那我们可以调整hide的执行时机，确保加载框已经被创建并显示：

$(document).ready(function() {
  $(document).on('click', 'a.no_loaderbox', function(e) {
    // 用setTimeout把hide放到下一个事件循环，确保加载框已生成
    setTimeout(() => {
      $('.loaderBox').hide();
    }, 0);
  });
});

另外你也可以用MutationObserver来监听DOM变化，一旦加载框被添加到页面就立即隐藏，这种方式更精准：

$(document).ready(function() {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // 检查新增的节点里有没有loaderBox
      const targetBox = $(mutation.addedNodes).filter('.loaderBox');
      if (targetBox.length) {
        targetBox.hide();
        // 如果只需要处理一次，可以在这里断开监听：observer.disconnect();
      }
    });
  });

  // 监听body下所有子元素的变化
  observer.observe(document.body, { childList: true, subtree: true });

  // 同时阻止冒泡，避免重复触发
  $(document).on('click', 'a.no_loaderbox', e => e.stopPropagation());
});

额外排查小技巧 #

1. 打开浏览器控制台，手动执行$('.loaderBox').hide()，看能不能正常隐藏——如果不行，说明你的选择器写错了，检查加载框的类名有没有拼写错误，或者是不是有嵌套层级需要更精确的选择器（比如$('body .loaderBox')）。
2. 在你的点击事件里加console.log('触发了no_loaderbox点击事件')，确认事件确实被触发了，排除委托绑定失败的可能。

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