div를 클릭하면 일부 html을 추가하려고 시도하고 페이지의 다른 부분을 클릭하면 새로 첨부 된 div와 첨부 된 div를 제외하고) 연결된 div를 제거하십시오. 웬일인지 내 :not() 셀렉터가 예상대로 작동하지 않습니다.jquery * : not()가 예상대로 괄호 안에있는 것을 제외한 모든 것을 선택하지 않습니다.
$("*").on("click", "body:not(._tlh_dropdown, ._tlh_dropdown_content)", function() {
// ... remove previously attached div
});
어떻게 아무것도 두 클래스 _tlh_dropdown 및 _tlh_dropdown_content를 제외하고 클릭 할 때이 div에 제거 할 수 있습니까? 잘
:
$("*").on("click", "body:not(._tlh_dropdown, ._tlh_dropdown_content)", function() {
당신이 원하는 거의 확실하지 않다. 그러면 페이지의 모든 요소에 대한 이벤트 처리기가 추가되어 <body>의 이벤트가 있는지 확인하도록 요청합니다. 그것은 일종의 의미가 없습니다. <body>하지만 헤더에 다른 아무것도 없기 때문에
그리고
$("body").on("click", "*:not(._tlh_dropdown, ._tlh_dropdown_content)", function() {
위의 두 번째 사항 (원래 질문과 동일)으로 변경 한 다음 내용이 표시된 후 <div>에 텍스트를 추가 한 다음 클릭하십시오. 또는,로 변경 :
$(document).on("click", "*:not(._tlh_dropdown, ._tlh_dropdown_content)", function() {
하고는 <body>에서 버블 링 이벤트를 잡을 수 있습니다.
편집 — 당신이 $(document)으로 가면, 그것은 또한 (당신이에, 각각의 핸들러 함수에 "이벤트"매개 변수를 추가하고 :-)를 작업 할 특히 좋은 생각을 것 헤더 몸까지 거품에가 "클릭"하면 실행 두 번째 핸들러를 방지 할 그 첫 번째 이벤트 핸들러 (추가 컨텐츠를 여는 일)에서
event.stopPropagation();
를 호출합니다. 두 번째 처리기의 경우 전파 전파가 중요하지 않지만 추가 된 내용을 닫으려고하는 중복 시도는 피할 수 있습니다.
일부 수정 — 아래의 설명을 참조하십시오. "close"핸들러는 "on"셀렉터 방식으로 문제를 해결할 수있는 몇 가지 미묘한 점이 있습니다.
왜 '$ ('body ')가 아닌'on ', function (e) {if ($ (e.target) .hasClass ('._ tlh_dropdown ') || $ (e.target) .hasClass ._thl_dropdown_content ')) {} else {}});'? – Ohgodwhy
이 답변을 주셔서 감사합니다. 나는 HTML과 body css를 늘려서'100 %'에서 설정 한 너비와 높이를 갖는 업데이트 바이올린을 만들었습니다. 그래서 여분의 div를 추가하지 않고 어디서나 클릭하면 테스트 할 수있었습니다. 그게 효과가 있다고 생각하니? http : // jsfiddle.net/qUHAB/7/컨테이너 div 자체를 클릭하면 여전히 컨테이너 div가 제거됩니다. 정말 혼란 스럽습니다. 왜 볼 수 있니? – 1252748
@Ohgodwhy 네, 확실히 그렇게 할 수도 있습니다. – Pointy
그것은 당신의 jsfiddle에있는 것이 아닙니다! – Pointy
@Pointy 그래, 나는 새로운 아이디어로 주위를 놀고 있었다. 질문을 제출하기 전에 업데이트하는 것을 잊어 버렸습니다. 지금 편집 중입니다. 감사! – 1252748
몸체는'._tlh_dropdown, ._tlh_dropdown_content'가 될 수 없으면 그 클래스를 가질 수 없으므로 이벤트는 항상 트리거됩니다. 대신 event.target이 click 이벤트 내에 있는지 테스트하십시오. –