$（this）除了特定的孩子

我試圖運行一個函數，如果你點擊李的任何地方，除了特定的按鈕（在這種情況下發生其他事情）。看來我應該使用.not或：not，但是嘗試下面的任一個會導致錯誤並阻止函數的執行。

編輯：加入jsfiddle Demo 該代碼遵循Blender的建議，通過切換live> on和使用他的語法，但是這並沒有解決問題。

的Javascript：

$('#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（）作爲切換是所需的行爲。

來源

2013-04-26 Henry Marshall

should't是富（）？ – letiagoalves 2013-04-26 19:47:49

除了'.live'被棄用並在jQuery 1.9中刪除之外，它不支持鏈接！ http://api.jquery.com/live/。你得到'未捕獲的SyntaxError：意外的令牌; '因爲你錯過了關閉'）'。 – 2013-04-26 19:48:34

您可以使用on這樣一個更簡潔的代表團是

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

相匹配的問題。然而，你問是當事件對孩子出現在父母停止活動。我認爲你需要做兩件事情：如果排除孩子則事件仍會觸發父項目和任何「空間」，它佔用（包括兒童）

所以把一個事件處理程序，並在邏輯上將其排除當事件觸發時
使用邏輯來檢測事件在哪個項目上啓動並終止處理程序。

這樣的：

 $('#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

來源

2013-04-26 21:47:03 gillyspy

你的前兩個例子沒有結束括號：

$('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到最接近的非動態創建的父元素的選擇。

來源

2013-04-26 19:49:24 Blender

$（this）除了特定的孩子

回答

相關問題