특정 어린이를 제외하고 $ (this)

Question

특정 버튼을 제외하고 li의 아무 곳이나 클릭하면 함수를 실행하려고합니다. 그것은 .not 또는 : not 중 하나를 사용해야하는 것 같지만 아래 중 하나를 시도하면 오류가 발생하고 함수가 실행되지 않습니다.

편집 : 추가 jsfiddle Demo 코드는 live> on으로 바꾸고 그의 구문을 사용하여 블렌더의 조언을 따르지만 문제가 해결되지 않았습니다.

자바 스크립트 :

$('#currentThread').on('click', 'li:not(.chromeElement)', function() { 
    $(this).find('.hiddenChrome').slideToggle(); 
}); 

HTML :

<div id='thunderdome'> 
    <section id='middle'> 
     <ul id='currentThread'> 
      <li class="c1L9zObS"> 
       <article> 
        <img src="http://www.gravatar.com/avatar/ae7238730d03d6da0df35cd8a96ee4dc?d=identicon" class="userPic"> 
        <p class="body">foo reply to op</p> 
       </article> 
       <p class="byline">By <span class="user">raurus</span><span class="timestamp">; Posted a while ago</span><span class="context">2 Tangents</span> 
       </p> 
       <div class="hiddenChrome" style="display: none;"> 
        <div class="chromeElement star"> 
         <p>Star</p> 
        </div> 
        <div class="chromeElement report"> 
         <p>Report</p> 
        </div> 
        <div class="chromeElement delete"> 
         <p>Delete</p> 
        </div> 
        <div class="chromeElement edit"> 
         <p>Edit</p> 
        </div> 
        <div class="chromeElement vote unvoted isLoggedIn"></div> 
       </div> 
       <hr> 
      </li> 
     </ul> 
    </section> 
</div> 

목표는이 문제가 있다는 것입니다 당신이

을 .hiddenChrome 보여주기 위해 확장됩니다 당신은 리튬 아무 곳이나 클릭 수 있다는 것이다 .chromeElement를 클릭하면 첫 번째 함수가 실행되고 .hiddenChrome은 백업을 토글합니다. 아무 것도 클릭하지 않도록하고 싶습니다./.chromeElement는 함수를 실행시킵니다.

토글 링은 원하는 동작이므로 .slideDown()을 사용하지 않으려합니다.

Answer 1

당신은 당신이 요구하는 것은 이벤트가 어린이에게 발생했을 때 부모의 이벤트를 중지하는 것입니다, 그러나 질문을

$('#currentThread').on('click', 'li:not('.chromeElement)'), function(){ 
    foo(); 
}); 

일치하는 더 간결 위임이 같은 on을 사용할 수 있습니다. 그래서 이벤트를 넣어 당신이 다음 이벤트가 여전히 부모 항목이 (아이 포함)를 차지하고있는 "공간"을 발광하는 아이를 제외하면

1. : 나는 당신이 두 가지를해야합니다 생각 처리기를 제외시키고 제외시키려는 항목에 대해 이벤트가 발생할 때
2. 이벤트를 시작한 항목을 감지하고 처리기를 종료하는 논리를 사용하십시오. 이 같은

:

 $('#currentThread').on('click', 'li, .chromeElement', function (e) { 
     var $this = $(this); 
     if ($this.closest('.chromeElement').length > 0) { 
     // if the click occurs on a chromeElement member then bail 
      return false; 
     } else { 
      $this.find('.hiddenChrome').slideToggle(); 
     } 
    }); 

your fiddle modified

Answer 2

처음 2 개의 실시 예는 폐쇄 괄호가없는 :

$('li').not('.chromeElement').live('click', function(){ 
    foo 
}); 
^ 


$('li:not(.chromeElement)').live('click', function(){ 
    foo 
}); 
^ 

또한 .live() 위 jQuery를 1.9에서 제거되었다. .on()로 교체 : 가장 가까운 비 동적으로 생성 된 부모 요소의 선택에

$(document).on('click', 'li:not(.chromeElement)', function() { 
    foo(); 
}); 

변경 document을.