jQuery - Удалить это onClick

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 ФУНКЦИОНАЛЬНОСТЬ * /, где я имею вопрос. Все остальное выше определяет функцию toggleClick и идентификатор переменной aPanel.

Вы можете увидеть текущую версию проблемы, которую я имею ниже, нажав кнопку Menu, расположенную в верхнем левом углу экрана.

Живая версия:

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. Таким образом, первая функция будет вызвана снова.

Update: очень простое решение

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);