jQuery의 클래스 전환

Question

코드 작업을 할 수 없습니다.

$(document).ready(function() { 
$('.openMenu').click(function() { 
    $('#menu').animate({ 
    left: '0%' 
    },500); 
    $(this).removeClass('openMenu').addClass('closeMenu'); 
}); 

$('.closeMenu').click(function() { 
    $('#menu').animate({ 
    left: '-100%' 
    },500); 
    $(this).removeClass('closeMenu').addClass('openMenu'); 
}); 
}); 

이 코드 블록

은 메뉴가 클래스 "openMenu"와 사업부가 클릭하면 표시하며 다시 클릭 할 때 즉, 메뉴가 사라지고, 그래서 그것을 "숨기기"버튼을 만들 수 있도록 할 예정이다. 등등.

한 번만 작동합니다. 메뉴가 나타나고 div의 클래스가 openMenu에서 closeMenu로 변경되지만 메뉴를 숨기지 않습니다.

난 당신의 코드가 실행되는 시간에 존재하지 않는 당신의 도움이

Answer 1

$('.closeMenu') 감사하겠습니다.

2 개의 핸들러를 하나로 결합하거나 이벤트 위임을 쉽게 사용할 수 있습니다. 나는 뒤로이있을 수 있으며 $('.openMenu') 그 경우 시작에 불과 선택을 변경 (초기 요소의 상태에 따라) 페이지로드에 존재하지 않는

$('.openMenu').click(function() { 
    var leftAmt = $(this).is('.closeMenu') ? '-100%' : '0%'; 
    $('#menu').animate({ 
    left: leftAmt 
    },500); 
    $(this).toggleClass('openMenu closeMenu'); 
}); 

:

그들과 같이 보일 것이다 결합 사건

Answer 2

나는 이벤트 위임이 당신이 여기에있는 것이라 생각합니다. jQuery의 .click 메서드를 사용하는 대신 .on 메서드를 사용하고 선택기를 제공하는 것이 좋습니다.

$(document).ready(function() { 
    $(document).on("click", ".openMenu", function() { 
    // ... 
    }); 
    $(document).on("click", ".closeMenu", function() { 
    // ... 
    }); 
}); 

Answer 3

코드가 최적화되지 않았습니다. 어쨌든, .closeMenu 존재하지 않는 요소에 이벤트를 첨부하고 있기 때문에 작동하지 않습니다.

언제든지 (페이지가로드 된 후에도) 생성 된 요소에 이벤트를 첨부하려면 이벤트 위임을 사용해야합니다. jQuery에서 이벤트 위임은 on() 및 off() 메소드를 통해 사용할 수 있습니다. 참조 : http://api.jquery.com/on/

여기 (안 테스트) 솔루션의 : 대상의 기존 부모에게 이벤트를 부착하기 때문에

$(document).on('click','.openMenu.', callback); 
$(document).on('click','.closeMenu.', callback); 

이 솔루션은 작동합니다.

(반복 :이 코드는 최적화되지 않았으며 더 나은 방법으로 메뉴를 수행 할 수 있지만 이벤트 위임은 일반적인 이벤트 문제를 해결합니다.) http://learn.jquery.com/events/event-delegation/ 또는 Google 참조 이벤트 위임에 대한 자세한 내용은

...