Question

我有一个点击事件，触发其他点击事件，向DOM添加元素。编辑：但是当我第二次点击它时，会添加两个元素，第三次添加两个元素。当我检查jQuery队列时，它确认我已经向每次触发的队列添加了一个事件。

我尝试完成的是通过单击另一个元素将点击事件添加到两个下拉列表。

$(".step-1 a").on("click", function(e){
        e.preventDefault(); 
        var userValue = $(this).attr('id');
        $(".template-image").removeClass("selected");
        $(this).children(":first").addClass("selected");
        $("#page_template option ").each(function(){
            var t = $(this);
            var cValue = t.attr("value");

            if(t.attr("selected") === "selected"){
                t.removeAttr("selected");
            }
            if(t.attr("value") === userValue ){
                t.prop("selected", "selected");
                $('#page_template').trigger('change');
                var template = t.attr("value");
                switch (template)
                {
                case "default":
                  $(".step-2").slideDown("fast");
                  $(".step-2").addClass("show");
                  break;
                default:
                  $(".step-2").removeClass("show");
                  $(".step-2").slideUp("fast");
                  break;
                }
            }
        });
    });

$('.step-2 img').on("click", function(e){
    e.preventDefault();
    var userinput = $(this).attr('id');
    $('.flexible-footer .acf-fc-add').each(function(){
        var text = $(this).text();
        if(text === "Add columns"){
            $(this).trigger('click');
            $('.flexible-footer .acf-fc-popup ul li a').each(function(){
                var column = $(this).attr('data-layout');
                if (column === userinput) {
                    $(this).trigger('click');
                    $(this).finish();
                    console.log($(this).queue());
                }
            });
        }
    });

Answer 1

听起来您在同一元素上多次分配点击事件。解决此问题的一个简单方法是使用jQuery函数off()删除旧的click事件，然后再添加新的click事件。或者确保您只将click事件添加到尚未拥有它们的新元素中。你可以这样做：

$('img.or-whatever').off('click').on('click', function(ev){...});

或者可能使用命名空间来提高可读性：

$('img.or-whatever').off('click.custom-namespace').on('click.custom-namespace', function(ev){...});

这可能不是您问题的正确答案，但它可能是一个解决方案。

编辑：如果您只想清除事件队列，可以尝试clearQueue()。

从jQuery清除点击队列

1 个答案: