从jQuery中清除单击队列

Question

我有一个click事件，它触发向DOM添加元素的其他click事件。编辑:但是当我第二次点击它时，两个元素被添加了，第三次两个元素被添加了。当我检查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事件添加到还没有它们的新元素中。你可以这样做：

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

或者可以使用名称空间来提高可读性：

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

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

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