클래스를 제거 할 때 내 jQuery 선택기에 알리지 않는 이유는 무엇입니까?

그래서 같은 클래스 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 클래스가 사라진 후에도 맨 윗줄에있는 상자를 클릭하면 문제가 발생합니다. 나는 경고가 팝업되지 않을 것으로 기대하지만, 여전히 그렇다.

출처

2011-01-11 Michael Martin-Smucker

핸들러는 실행될 때 선택기에서 찾은 결과에 따라 한 번 할당됩니다 (DOM 준비가 필요함).

이후에 이러한 요소의 클래스를 수정해도 바인딩 된 핸들러에는 영향을주지 않습니다.

당신이 더 동적 대신 요소의 조상에 a .delegate() 핸들러를 배치 할 경우

, 모든 요소를 포함하는 유일한 컨테이너가 <body> 경우

$('#someContainer').delegate('.active .button','click',function(){ 
    alert('Button clicked!'); 
});

, 그 다음을 사용 :

업데이트

$('body').delegate('.active .button','click',function(){ 
    alert('Button clicked!'); 
});

귀하의 예 :http://jsfiddle.net/KjuDy/1/

출처

2011-01-11 19:59:06 user113716

감사합니다! 이것은 단순화 된 jsfiddle 예제뿐만 아니라 실제 프로젝트에서도 완벽하게 작동했습니다. 나는 약간의 독서를해야만 실제로 여기서 무슨 일이 벌어지고 있는지 이해하지만 적어도 당분간은 내 프로젝트가 기능적이다. –

@ mlms13 : 간단한 개요를 제공하기 위해'.delegate()'함수는 "이벤트 위임"을 사용합니다. 많은 종류의 페이지에 "버블". 즉, 페이지를 클릭 한 다음 클릭 한 가장 깊은 중첩 요소부터 시작하여 해당 요소에 할당 된 "클릭"처리기가 있는지 확인합니다. 그렇다면, 그것을 호출합니다. 그런 다음 요소의 상위로 이동하고 동일한 작업을 수행하며, 문서 루트에 도달 할 때까지 계속됩니다. "이벤트 위임"을 사용하면 이벤트 핸들러를 일부 상위 컨테이너에 배치합니다. 그런 다음 컨테이너 내부에서 발생하는 클릭 이벤트가 그 위로 거품을냅니다. – user113716

... 핸들러를 실행합니다. 따라서 jQuery의'.delegate()'메소드가 구체적으로 작동하는 방식은 전달 된 첫 번째 인자가 클릭 된 컨테이너 내부의 요소를 테스트하는 데 사용되는 * selector *입니다. 귀하의 경우, 당신은'.active. button '을 전달하고 있습니다. 따라서 컨테이너 안의 어떤 요소라도 클릭하면 해당 셀렉터와 일치하고 jQuery는 핸들러를 시작합니다. 그래서'.button'을 클릭하는 이유입니다.active'는 핸들러를 호출하지만,'active' 클래스를 제거하면 더 이상 셀렉터와 일치하지 않기 때문에 더 이상 그렇게하지 않습니다. 희망이 도움이됩니다. – user113716

jQuery는 처음 클릭 이벤트를 바인딩 할 때 일치하는 DOM 요소에 바인딩합니다.

jQuery live을 살펴보십시오.

출처

2011-01-11 19:58:18 Zach

클래스를 제거 할 때 내 jQuery 선택기에 알리지 않는 이유는 무엇입니까?

답변

관련 문제