Как я могу скрыть div, который я только что добавил, одним щелчком мыши? - PullRequest
Новая
       17

Как я могу скрыть div, который я только что добавил, одним щелчком мыши?

0 голосов
/ 31 мая 2018

Я добавляю некоторый HTML-код к моей кнопке одним нажатием, например: 

jQuery(document).ready(function($) {
    $('#sprout-view-grant-access-button').on('click', function(e) {
        $(this).toggleClass('request-help-cta-transition', 1000, 'easeOutSine');
        var callback = $(e.currentTarget).attr('data-grant-access-callback');
        var wrapper = $('.dynamic-container');
        console.log(wrapper);

        if( typeof window[callback] !== 'function') {
            console.log('Callback not exist: %s', callback);
        }

        var already_exists = wrapper.find('.main-grant-access');
        console.log(already_exists);

        if( already_exists.length ) {
            already_exists.remove();
        }

        var markup = $(window[callback](e.currentTarget));
        wrapper.append(markup);

    });
});

function generate_grant_access_container_markup() {
    var contact_data_array = contact_data;

    var template = jQuery('#template-sprout-grant-access-container')

    return mustache(template.html(), {
        test: 's'
    });
}

В соответствии с кодом, все, что исходит от generate_grant_access_container_markup, будет помещено в dynamic-container и показано.

Моя проблема в том, что вновь добавленный код просто не хочет исчезать при повторном нажатии (переключении) кнопки.

Вот мой шаблон синтаксиса / усов: 

<script type="template/mustache" id="template-sprout-grant-access-container">
    <p class="main-grant-access">{{{test}}}</p>
</script>

И вот контейнер: 

<div class="button-nice request-help-cta" id="sprout-view-grant-access-button" data-grant-access-callback="generate_grant_access_container_markup">
Grant Devs Access
    <div class="dynamic-container"></div>
</div>

Я понимаю, что событие click знает только об элементах, которые находятся в DOM на момент нажатия, но как я могу сделать так, чтобы оно знало обо всем, что получаетдобавлено после?

1 Ответ

0 голосов
/ 31 мая 2018

Я бы порекомендовал видимость: скрыто.Оба не отображают ничего и удаляют элементы из домовой путаницы с потоком веб-сайта.Вы можете быть уверены, что не повлияете на дизайн с помощью видимости: hidden.

Я вообще не имею дело с Jquery, но кажется, что это переполнение стека охватывает метод для его правильной настройки.

Эквивалент jQuery .hide () для установки видимости: скрыто

...