防止加载后冒泡？答案

【问题标题】：Preventing bubbling after loading?防止加载后冒泡？
【发布时间】：2010-09-13 13:05:23
【问题描述】：

我有一个大问题。

我有一个名为“#box”的 div，它会在单击其中的链接后加载外部内容：

$("#box a").click(

 function(e)
 { 
 e.preventDefault(); 
 var hash = this.parentNode.hash;
    $("#boxLoaded").load('boxFiles/'+ hash.substring(1) +'.html');
    $("#box").fadeOut(100);  
    $("#boxLoaded").fadeIn(200);     
 });

到目前为止很容易:)

当有人单击“#boxLoaded”中的任意位置时，它会消失并再次加载框，所以它看起来像一开始的样子：

$("#boxLoaded").click(
    function()
    {  
        $("#boxLoaded").fadeOut(200);
        $("#box").show(); 
 });

问题是我在加载的文件（#boxLoaded 内部）中有一个名为“box-menu”的菜单，当有人点击它们时 - 上面的代码正在执行（淡出 #BoxLoaded 并显示 #Box）。

我想阻止它发生，但是：

$("#box-menu").click(
    function(e)
    {  
        e.preventDefault() 
 });

怎么办？它工作正常，当我不加载（）这些文件时......

【问题讨论】：

标签： jquery event-bubbling

【解决方案1】：

您只需切换到.live() 并在此处通过event.stopPropagation() 停止冒泡：

$("#box-menu").live("click", function(e) {
  e.stopPropagation();
});

或者，你可以重新绑定然后加载，改变这个：

$("#boxLoaded").load('boxFiles/'+ hash.substring(1) +'.html');

到这里：

$("#boxLoaded").load('boxFiles/'+ hash.substring(1) +'.html', function() {
  $("#box-menu").click(function(e) { e.stopPropagation(); });
});

【讨论】：

奥赫。我终于可以使用 jQuery 对这个菜单做一些事情了（你的选择器工作得很好，我可以改变边框/背景等），但是停止传播仍然不起作用。怎么了？
Test
- 仍然淡出 boxLoaded div ;/跨度>
@fomicz - 您是在使用.live() 还是重新绑定？根据您可能希望重新绑定以确保安全的顺序，如果不是，则绑定的顺序可能很重要（它们按照绑定的顺序执行），因此您可能需要切换到 .delegate() 并首先绑定它。
第一种方法不起作用，但第二种方法起作用。杰出的！你一直都在这里，你不是机器人尼克吗？ ;)
@fomicz - 嘘，别告诉他们！

【解决方案2】：

通过调用e.preventDefault()，您只会阻止链接恢复其默认事件。单击包含 div 的链接后，#boxLoaded 仍然有其 onclick() 命令。而不是使用e.preventDefault() 尝试return false。我认为在这种情况下应该与preventDefault() 做同样的事情，并且也会中止随后的命令。

-- 我还不能评论人们的帖子，但在回应尼克时，'这很酷，没有意识到有一个 e.stopPropagation() 函数'

【讨论】：