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

您可以在添加标记之前执行类似添加标记和检查的操作。

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

Answer 2

如果你只想在点击时添加一次元素，那么你应该使用.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>

如何观察我的DOM的变化并使用jQuery对它们做出反应？

2 个答案: