나는 DOM 구조를 가지고

Question

에 영향을 미치는 chlidren에서 라이브 jQuery를 중지 :

<div class="hotspot"> 
    <div class="hotspot_inner"> 
     <div class="hotspot_info"> 
      <div class="inner_box"> 
       <h2><%= hotspot.info.title %></h2> 
       <p><%= hotspot.info.description.html_safe %></p> 
      </div> 
     </div> 
    </div> 
</div> 

나는 또한 핫스팟 내에서 모든 것을 만드는 클래스 '.hotspot'로 아무것도에 클릭 이벤트 리스너를 부착 일부 커피 스크립트를 클릭시 '.hotspot_inner'및 아래로 표시됩니다.

'.hotspot'클래스로 아무 것도 클릭하지 않으면 다시 한 번 보이지 않는 모든 항목이 다시 표시됩니다.

핫스팟 내부의 아무 항목이나 클릭해도 부모에게 연결된 닫기 이벤트가 트리거됩니다.

stopPropagation()을 시도했지만 아무 소용이 없습니다. 나는 라이브에서 이와 같은 문제가 있다고 들었지만 핫스팟이 동적으로 추가되기 때문에이를 사용해야합니다.

아이디어가 있으십니까?

Answer 1

이벤트가 이미을 전파 때문에 stopPropagation()에 대한 호출이 작동하지 않습니다; 그것이 "라이브"메커니즘이 작동하는 방식입니다.

대신 할 수있는 일은 이벤트 개체 자체에 어딘가에 플래그를 설정하는 것입니다. 부모 핸들러는이를 확인하고 아무 것도하지 않아도된다는 것을 알 수 있습니다.

또는 jQuery가 이벤트 객체의 "대상"속성으로 정규화하는 이벤트 대상을 확인할 수 있습니다. 부모 처리기가 대상이 아니라고 판단하면 이벤트를 건너 뛸 수 있습니다. 상호 작용 패턴의 본질과 DOM의 구조에 따라 때로는 까다로울 수 있습니다.

.live()은 몇 년 동안 사용 중지되었습니다. 현재 버전의 라이브러리에서는 .on()을 사용해야하며이 라이브러리는 .bind()과 .delegate()의 기능을 결합합니다.

Answer 2

event.target을 확인하십시오.

if (event.target.className === 'hotspot') { 
     // do stuff 
    } 

Answer 3

나는 당신이 원하는 것을 추측한다 : .hotspot 클래스를 클릭 할 때, 당신은 토글 (toggle)하기를 원한다. 그리고 .hotspot_inner 클래스 (텍스트 또는 무엇이든) 안에서 아무 것도 클릭하면 click 이벤트를 트리거하지 않을 것이다. 핫스팟? 이 경우 stopPropagation()이 .hotspot_inner 클릭 이벤트 내에 있는지 확인해야합니다. 즉, 당신이 원하는 경우

$('.hotspot_inner').click(function(event){ 
     event.stopPropagation(); 

    })​ 

여기 봐주십시오 http://jsfiddle.net/5JJEd/