Javascript 如何观察对DOM的更改并使用jQuery对其作出反应？

我有一个函数，在这个函数中，我可以在单击时切换一个类，但也可以将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);

有人建议使用数据属性，但我不知道如何使它们在这种情况下工作

---

有什么想法吗？

您可以做一些事情，比如添加一个标志，并在添加标记之前检查它

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

---

若您只想在单击时添加元素一次，那个么您应该使用并在该处理程序中放置您只想执行一次的逻辑

例如：

$(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元素以增大其文本大小。对于每个p元素，事件将只触发一次

还需要更多信息和html。如果您可以创建一个演示并显示问题，最好只添加一次元素，对吗？这对您有效吗？？？

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