jQuery에서 클릭 큐 지우기

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 이벤트를 제거하는 것입니다. 또는 아직 클릭 이벤트가없는 새 요소에만 클릭 이벤트를 추가하고 있는지 확인하십시오. 당신은 이런 식으로 작업을 수행 할 수 있습니다

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

아니면이 증가 읽기 쉽도록 네임 스페이스를 사용

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

그것은 귀하의 질문에 대한 정확한 답하지 않을 수 있지만,이 해결책이 될 수 있습니다.

편집 : 이벤트 대기열을 지우려면 clearQueue()을 시도하면됩니다.