Question

我试图选择一个整个div但不是主div内部的特定div。示例如下：

<div id="main_holder">
   <div id="secondHolder">
      <div id="thirdHolder">
         <div id="divIdoNotWantToUse" class="notUsed"></div>
      </div>
   </div>
</div>

我正在尝试一个简单的点击，看到当我点击div时，它不应该收到警报。

$('#main_holder').not('#main_holder.notUsed').click( function(event) {
    alert( 'pullmenu clicked' );
});

它不起作用，那么最好的方法是什么？有没有办法在非选择器中使用find？

示例有效：

$('#main_holder').find('#divIdoNotWantToUse').css({ border: '5px solid red' });

Arun解决方案：

$('#main_holder').click( function(event) {
    if(!$(event.target).closest('.notUsed').length)
    {
        alert( 'pullmenu clicked' );
    }
});

Answer 1

向选择器#main_holder.notUsed添加一个空格，而没有空格，选择器会查找标识为main_holder且类notUsed的元素，而不是main_holder中的元素一类notUsed。

$('#main_holder').not('#main_holder .notUsed').click( function(event) {
    alert( 'pullmenu clicked' );
});

此方法的问题在于，即使从.notUsed移除了click事件处理程序，该事件仍将传播到周围的div，导致警报触发。最好有条件地检查目标，然后决定是停止还是允许传播。

$('#main_holder').click( function(event) {
    if(!$(event.target).is(".notUsed")){
        alert( 'pullmenu clicked' );
    }
});

工作示例： http://jsfiddle.net/xBctQ/

Answer 2

我可以在你的标记中看到错误：

<div id="thirdHolder>
   //--------------^---------a closing " required

虽然它不是一个大问题，但你需要在标记中看到文字才能看到点击效果：

<div id="main_holder">Used
   <div id="secondHolder">Used
      <div id="thirdHolder">Used
         <div id=" divIdoNotWantToUse " class="notUsed">Not Used</div>
      </div>
   </div>
</div>

如果这已得到纠正，那么您可以尝试以下脚本：

$('#main_holder').children().click( function(event) {
    alert( 'pullmenu clicked' );
});
$('#main_holder .notUsed').click( function(event) {
    event.stopPropagation();
});

您可以通过.stopPropagation()停止活动冒泡。

Find in FIDDLE

Answer 3

你可以这样做：

$('#main_holder').click(function (event) {
    alert('pullmenu clicked');
});

$('#divIdoNotWantToUse').click(function (event) {
    event.stopPropagation();
});

DEMO HERE

Answer 4

尝试

$('#main_holder').click( function(event) {
    if(!$(event.target).closest('.notUsed').length){
        alert( 'pullmenu clicked' );
    }
});

演示：Fiddel

jquery不在子div中（我可以使用find吗？）

4 个答案:

Find in FIDDLE