Question

我有一个很大的问题。

我有一个名为“#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() 
 });

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

Answer 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(); });
});

Answer 2

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

- 我不能评论人们的帖子，但是在回应尼克时，“很酷，没有意识到有e.stopPropagation()功能”

加载后防止冒泡？

2 个答案: