jQuery - Remove This onClick

jQuery - Remove This onClick

本文关键字：onClick This Remove jQuery      更新时间：2023-09-26

我在删除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();
    });
});

/*定义公寓功能*/是我遇到问题的地方。以上所有内容都定义了toggleClick函数和aPanel变量ID。

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

实时版本：

http://iamaaron.com/alpha/

非常感谢！

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

第二个（这已经不重要了；）return this.click(function(){会为每个元素附加一个点击处理程序。CCD_ 3将在第一次点击时将CCD_ 4存储在CCD_。现在单击覆盖时，其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);
相关文章：