Контент, добавленный jQuery.prepend, не активируется (даже при запуске.on)

Question

Спасибо за любую помощь. Этот сайт был отличным ресурсом.

Моя проблема: когда меню открывается на сайте, над которым я работаю, я также добавляю (к основному элементу) оверлей div и назначаю ему класс, который должен позволять кликать по нему, чтобы закрыть меню и удалить себя. Это сделано для того, чтобы пользователь мог щелкнуть в любом месте за пределами меню, чтобы закрыть его, вместо того чтобы требовать от него нажатия кнопки "Закрыть". Это звучит достаточно просто, но я не могу заставить его работать.

Я знаю, что существуют проблемы "связывания", так как я добавляю контент в DOM, поэтому я использовал.on() вместо.click(), полагая, что это позволит моему триггерному событию быть привязанным к недавно созданному div. Я также пробовал.bind(), но, честно говоря, я просто угадываю код на данном этапе, так как я не понимаю разницу между ними. Я не хочу использовать плагин для чего-то, что кажется таким простым, поэтому я надеюсь, что произошла легкая ошибка, которая сразу же станет очевидной для тех из вас, у кого больше опыта, то есть для всех вас.;) Вот моя функция jQuery. Все работает, как я хочу, за исключением того, что нажатие на "#the-overlay" ничего не делает.

    $('.the-toggle').on("click", function(){
    $(".the-menu").slideToggle();
    $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

    if ($('#the-overlay').length) {
        $('#the-overlay').remove();
    }
    else {
        var content = '<div id="the-overlay" class="the-toggle"></div>';
        $('body').prepend(content);

        var docHeight = $(document).height();
        $("#the-overlay").height(docHeight);    
    }
});

Пожалуйста, извините, если мой вопрос как-то нарушает правила. Я искал ответ, чтобы избежать повторов, но все, что я мог найти, указывали, что моя проблема будет решена с помощью.on() или устаревшего.live().

Спасибо.

Answer 1

Использовать синтаксис делегирования:

$(document.body).on("click",'.the-toggle', function(){...});

Answer 2

Пожалуйста, замените ваш код с кодом ниже. Это будет работать.

$(document).ready(function(e) {
    theToggle();
});
function theToggle(){
    $('.the-toggle').on("click", function(){
        $(".the-menu").slideToggle();
        $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

        if ($('#the-overlay').length) {
            $('#the-overlay').remove();
        }
        else {
            var content = '<div id="the-overlay" class="the-toggle"></div>';
            theToggle();
            $('body').prepend(content);             
            var docHeight = $(document).height();
            $("#the-overlay").height(docHeight);    
        }
    });
}