子供の1人を除く親をクリックしてください - jquery

Question

ここは私のフィドルです。

クラス.notClickableColを持つ1人の子供を除いて、親ボックスをクリックしていくつかのアクションを実行したいと思います。 :not()を使用しましたが、現在は動作していません。

このテキスト（「クリック不可」）に<span>タグが含まれていないと機能しています。

アイデア？

HTML/CSS/jQueryの：

jQuery(".row").on('click', ':not(.notClickableCol)', function() { 
 
    alert('success'); 
 
});

.row { 
 
    margin-bottom:15px; 
 
    border-bottom:1px solid #ccc; 
 
} 
 
.row { 
 
    width:150px; 
 
    height:150px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    text-align:center; 
 
    color:#fff; 
 
    font-family:Arial; 
 
    font-weight:bold; 
 
    margin-right:10px; 
 
    background:#ff6777; 
 
    margin-left:50px; 
 
} 
 
.clickableCol { 
 
    display:block; 
 
    cursor:pointer; 
 
    margin-top:45px; 
 
    margin-bottom:20px; 
 
    color:#000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <span class="clickableCol">Clickable</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span class="notClickableCol">Not Clickable</span> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <span class="clickableCol">Clickable</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span class="notClickableCol">Not Clickable</span> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <span class="clickableCol">Clickable</span> 
 
    </div> 
 
    <div class="col"> 
 
    <span class="notClickableCol">Not Clickable</span> 
 
    </div> 
 
</div>

Answer 1

あなたのセレクタが広すぎます。私は.colの代わり.rowを使用したい：

jQuery(".col :not(.notClickableCol)").on("click", function() { 
    alert('success'); 
}); 

ここa working fiddleです。

---

また、単にちょうどclickableColと.not()すべて一緒に落とすことができます：

jQuery(".clickableCol").on("click", function() { 
    alert('success'); 
}); 

Here's another working fiddle.

Answer 2

あなたは次のようにそれを行うことができます。あなたではなく、クリック可能な要素に焦点を当てていないのはなぜ

jQuery(".row").click(function (e) { 
    if (!$(e.target).hasClass('notClickableCol')) { 
     alert('success'); 
    } 
}); 

UPDATED FIDDLE

Answer 3

？このように：

/* For a clickable col inside this row, not every clickableCol 
that might be in another table */ 
jQuery(".row").on('click', ':has(.clickableCol)', function() { 
    alert('success'); 
}); 

あなただけの上のonclickイベントを使用することができます。

jQuery(".row").on('click', '.clickableCol', function() { 
    alert('success'); 
}); 

Answer 4

代わりにのみnotclickablecolを除く、あなたはそれが持っているセレクタを使用してクラスclickablecolを持っている場合登録だけにそれを伝えることができます.clickableColクラスですが、このクラスで別のcolをクリックしたときに別のアクションが必要な場合があるため、これはうまくありません。

Answer 5

定義されたクラスにまたがっていない記述する必要があります...

jQuery(".row").on('click', 'span:not(.notClickableCol)', function() { 
    alert('success'); 
});