2013-06-27 54 views
0

我有一些麻烦去除的jQuery在相同功能创建的元素。这里是正在发生的事情:jQuery的 - 删除该的onClick

我创建了打开侧面板,然后创建一个应用到页面的其余部分覆盖元件(不含面板)一个jQuery函数(toggleClick)。 什么是应该发生的是在用户点击后叠加,将关闭面板,也摆脱了覆盖件。我在这里做错了什么?

jQuery代码:

jQuery(document).ready(function(){ 
    /* DEFINE TOGGLECLICK */ 
    $.fn.toggleClick=function(){ 
     var functions=arguments 
     return this.click(function(){ 
      var iteration=$(this).data('iteration')||0 
      functions[iteration].apply(this,arguments) 
      iteration= (iteration+1) %functions.length 
      jQuery(this).data('iteration',iteration) 
     }) 
    } 
    /* DEFINE APANEL ID */ 
    var aPanel = "#aPanel"; 
    /* DEFINE APANEL FUNCTIONALITY */ 
    jQuery('#apanel-fire,#aPanelOverlay').toggleClick(function() { 
     jQuery("body").addClass("active"); 
     jQuery(aPanel).addClass("active"); 
     jQuery("<div id='aPanelOverlay'></div>").appendTo(".page"); 
    }, function() { 
     jQuery("body").removeClass("active"); 
     jQuery(aPanel).removeClass("active"); 
     jQuery("#aPanelOverlay").remove(); 
    }); 
}); 

的/ *定义APANEL功能,* /在这里,我遇到的问题。以上所有内容都定义了toggleClick函数和aPanel变量ID。

您可以通过点击位于屏幕左上方的菜单按钮来查看我现在遇到的问题的实时版本。

真人版:

http://iamaaron.com/alpha/

太谢谢你了!

+1

尝试阻止默认行为为Click事件。另外,是否有一个特别的原因,你总是从'jQuery.'切换到'$ .''?最后,建立一个jsFiddle可能会更有用,而不是简单地链接到当前的活动网站。 – BenM

回答

1

首先,当你调用jQuery('#apanel-fire,#aPanelOverlay').toggleClick覆盖不存在,因为它是后补。所以它没有点击处理程序,并且不会对任何点击作出反应。

二(这其实并不重要了;)return this.click(function(){会附加一个单击处理每个元素。 jQuery(this).data('iteration',iteration)将在#apanel-fireiteration存储在第一次点击。当你现在点击叠加层时,它的iteration仍然是0.因此第一个函数将被再次调用。

更新:一个非常简单的解决方案

function showOverlay() { 
     jQuery("body").addClass("active"); 
     jQuery(aPanel).addClass("active"); 
     jQuery("<div id='aPanelOverlay'></div>").appendTo(".page").click(hideOverlay); 
    } 
    function hideOverlay() { 
     jQuery("body").removeClass("active"); 
     jQuery(aPanel).removeClass("active"); 
     jQuery("#aPanelOverlay").remove(); 
    } 

    jQuery('#apanel-fire').click(showOverlay); 
+0

@zerofalgL:非常感谢您的解释,但我该如何解决这个问题?我将如何重写? –

+1

有很多选择。我用最简单的解决方案更新了我的答案。 – zeroflagL