Question

我在同一个函数中删除jQuery创建的元素时遇到了一些麻烦。以下是发生的事情：

我创建了一个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();
    });
});

/ * DEFINE APANEL FUNCTIONALITY * /是我遇到问题的地方。上面的其他所有内容都是定义toggleClick函数和aPanel变量ID。

您可以点击屏幕左上角的菜单按钮，查看我在下面遇到的问题的实时版本。

直播版：

http://iamaaron.com/alpha/

非常感谢你！

Answer 1

首先，当您致电jQuery('#apanel-fire,#aPanelOverlay').toggleClick时，叠加层不存在，因为它稍后会附加。所以它没有点击处理程序，也不会对任何点击做出反应。

第二个（这不再重要;）return this.click(function(){会为每个元素附加一个点击处理程序。 jQuery(this).data('iteration',iteration)会在第一次点击时将iteration存储在#apanel-fire上。当你现在点击叠加层时，它的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);

jQuery - 删除此onClick

1 个答案: