중첩 된 fadeToggle이 두 번 왜 화재가 발생합니까?

Question

'영웅'ID를 클릭하면이 jQuery의 '# hero-text'에 중첩 된 fadeToggle이 발생하고 이유를 파악하고이 동작을 해결하는 방법을 설명하려고합니다.

$(document).ready(function() { 
     $('#hero').click(function() { 
      $('.non-hero').fadeToggle(800, function() { 
       $('#hero-text').fadeToggle(); 
      }); 
     }); 
}); 

Answer 1

본인은 수시로이 문제가 발생했습니다. 당신은 이유를 알아 내려고 시간을 보낼 수 있습니다,하지만 당신은 빠른 해결책을 원하는 경우, 여기 당신은 간다 :

$(document).ready(function() { 
     $('#hero').off().click(function() { 
      $('.non-hero').fadeToggle(800, function() { 
       $('#hero-text').fadeToggle(); 
      }); 
     }); 
}); 

위의 대답은 '#hero는'여분의 바인딩을 받고있는 사건을 해결합니다. 그러나 '.non-hero'가 두 곳 이상에서 사용되는 경우가있을 수 있습니다. 이 함수는 각 인스턴스에 대해 실행될 것이고, '# hero-text'에 대해 fadeToggle을 트리거하는 별도의 이벤트를 발생시킵니다.

$(document).ready(function() { 
     $('#hero').click(function() { 
      $('.non-hero').fadeToggle(800); 
      setTimeout(function() { 
       $('#hero-text').fadeToggle(); 
      }, 800); 
     }); 
     $('#primary').click(function() { 
      $('.non-primary').fadeToggle(800); 
      setTimeout(function() { 
       $('#primary-text').fadeToggle(); 
      }, 800); 
     }); 
     $('#secondary').click(function() { 
      $('.non-secondary').fadeToggle(800); 
      setTimeout(function() { 
       $('#secondary-text').fadeToggle(); 
      }, 800);      
     }); 
    }); 

을 그리고 당신이 고려하는 웃음을 위해 나는 다른 jsfiddle을 게시 :

당신의 jsfiddle에 의하면,이 시도

http://jsfiddle.net/GbgvH/3/