Как я могу наблюдать за изменениями в моем DOM и реагировать на них с помощью jQuery?

Question

У меня есть эта функция, где я переключаю класс по клику, но также добавляю HTML к элементу, все еще основанному на этом клике.

Проблема в том, что сейчас я не слушаю никаких изменений DOMв общем, поэтому, когда я сделаю свой первый щелчок, да, мой контент будет добавлен, но если я нажму еще раз - контент будет добавлен снова, потому что, насколько известно этому экземпляру jQuery, элемента там нет.

Вот мой код:

(function($) {
    "use strict";

    var closePluginsList = $('#go-back-to-setup-all');
    var wrapper = $('.dynamic-container');

    $('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
        $('.setup-theme-container').toggleClass('plugins-list-enabled');

        if ( !wrapper.has('.plugins-container') ){
            var markup = generate_plugins_list_markup();
            wrapper.append(markup);
        } else {
            $('.plugins-container').hide();
        }
    });


    //Below here, there's a lot of code that gets put into the markup variable. It's just generating the HTML I'm adding.
})(jQuery);

Кто-то предложил использовать атрибуты данных, но я не знаю, как заставить их работать в этой ситуации.

Есть идеи?

Answer 1

Если вы хотите добавить элемент один раз только по щелчку, то вам следует использовать .one () и поместить логику, которую вы хотите выполнить, только один раз в этом обработчике.

Пример:

$(document).ready(function(){
    $("p").one("click", function(){
       //this will get execute once only
        $(this).animate({fontSize: "+=6px"});
    });

    $("p").on("click", function(){
      //this get execute multiple times 
        alert('test');
    });
});

html

<p>Click any p element to increase its text size. The event will only trigger once for each p element.</p>

Answer 2

Вы можете просто сделать что-то вроде добавления флага и проверить его перед добавлением разметки.

    var flag = 0;
    $('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
    $('.setup-theme-container').toggleClass('plugins-list-enabled');


    if ( !wrapper.has('.plugins-container') ){
        var markup = generate_plugins_list_markup();
        if(flag == 0){
            wrapper.append(markup);
            flag = 1;
        }

    } else {
        $('.plugins-container').hide();
    }
});