그래서 같은 클래스 active
와 부모 요소에 포함 된 요소가 :클래스를 제거 할 때 내 jQuery 선택기에 알리지 않는 이유는 무엇입니까?
<div class="active">
<div class="button"></div>
</div>
내가 그 사업부가 active
에 포함되어있는 경우에만 jQuery를 내 button
DIV에 클릭을 처리하도록 설정되어 있지만, 그래서 같은 부모 :
$('.active .button').click(function(){
alert('Button clicked!');
});
내가 jQuery를 부모로부터
active
클래스를 제거하고, 심지어 클래스를 제거한 후하는 데 사용은 경고 아직도 내가 버튼을 클릭하면 나타납니다. 단추가 선택기 기준을 더 이상 충족시키지 않기 때문에 매우 이상하게 보입니다. Chrome, Firefox 및 IE에서 발생하므로 의도적 인 동작 인 것 같습니다. 내가 놓친 게 있니? 아니면이 문제를 해결할 수있는 쉬운 방법이 있습니까?
다음은 테스트 용으로 간단한 JSFiddle 예제입니다 : http://jsfiddle.net/KjuDy/. 상단 행의 상자를 클릭하십시오. 그러면 경고가 팝업되고 예상대로 active
클래스가 제거됩니다. active
클래스가 사라진 후에도 맨 윗줄에있는 상자를 클릭하면 문제가 발생합니다. 나는 경고가 팝업되지 않을 것으로 기대하지만, 여전히 그렇다.
감사합니다! 이것은 단순화 된 jsfiddle 예제뿐만 아니라 실제 프로젝트에서도 완벽하게 작동했습니다. 나는 약간의 독서를해야만 실제로 여기서 무슨 일이 벌어지고 있는지 이해하지만 적어도 당분간은 내 프로젝트가 기능적이다. –
@ mlms13 : 간단한 개요를 제공하기 위해'.delegate()'함수는 "이벤트 위임"을 사용합니다. 많은 종류의 페이지에 "버블". 즉, 페이지를 클릭 한 다음 클릭 한 가장 깊은 중첩 요소부터 시작하여 해당 요소에 할당 된 "클릭"처리기가 있는지 확인합니다. 그렇다면, 그것을 호출합니다. 그런 다음 요소의 상위로 이동하고 동일한 작업을 수행하며, 문서 루트에 도달 할 때까지 계속됩니다. "이벤트 위임"을 사용하면 이벤트 핸들러를 일부 상위 컨테이너에 배치합니다. 그런 다음 컨테이너 내부에서 발생하는 클릭 이벤트가 그 위로 거품을냅니다. – user113716
... 핸들러를 실행합니다. 따라서 jQuery의'.delegate()'메소드가 구체적으로 작동하는 방식은 전달 된 첫 번째 인자가 클릭 된 컨테이너 내부의 요소를 테스트하는 데 사용되는 * selector *입니다. 귀하의 경우, 당신은'.active. button '을 전달하고 있습니다. 따라서 컨테이너 안의 어떤 요소라도 클릭하면 해당 셀렉터와 일치하고 jQuery는 핸들러를 시작합니다. 그래서'.button'을 클릭하는 이유입니다.active'는 핸들러를 호출하지만,'active' 클래스를 제거하면 더 이상 셀렉터와 일치하지 않기 때문에 더 이상 그렇게하지 않습니다. 희망이 도움이됩니다. – user113716