jQueryのセレクタの:notについて

Question

jQueryとbootstrapとfont-awesomeを使っています。

<a class="head">
  <h3>見出し
    <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="top" title="tooltip"></i>
  </h3>
</a>

  $("a.head h3:not('i')").on("click", function () {
    alert("iのアイコンをクリックしても実行されないように書きたい。")
  })

HTMLをa > h3 > i と書いているのですが、jQueryのセレクターで
iをクリックした時にはアラートがでないようにしたいのですが、notで対応可能な事案でしょうか？

Answer 1

テキスト部分をspanか何かで囲めばよいでしょう

<script>
$(function(){
  $("a.head h3 :not('i')").on("click", function () {
    alert("iのアイコンをクリックしても実行されないように書きたい。")
  })
});
</script>
<a class="head">
  <h3><span>見出し</span>
    <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="top" title="tooltip"></i>
  </h3>
</a>

• 調整版

<script>
$(function(){
  $("a.head h3").on("click", function (e) {
    if(e.target.nodeName=="H3"){
      console.log("iのアイコンをクリックしても実行されないように書きたい。");
    }
  })
});
</script>
<a class="head">
  <h3>見出し
    <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="top" title="tooltip">x</i>
  </h3>
</a>

Comments

[keisuu]

ありがとうございます。
実装したいことに近づきました。

codepenを作ってみたのですが、
現在h3>span部分をクリックするとalertがでますが、
h3>spanの文字部分ではなく、灰色の背景部分(h3)を押すとalertがでる。
しかし、iのアイコン部分だけはalertが出ないようにするにはどのようにすればよろしいでしょうか。

https://codepen.io/dayonomaigu/pen/vYYomZr

[yambejp]

なるほど・・・調整版の方でお試しください（spanはやめました）
一部わかりにくところを修正しました

[keisuu]

:notをやめて、e.target.nodeName=="H3"で限定するということですね。
大変助かりました。ありがとうございます。

Answer 2

"a.head h3:not('i')"ではなく、"a.head h3:not(i)"なのではないでしょうか。

Comments

[keisuu]

閲覧、ご回答ありがとうございます。
ご指摘の通り、(i)が正しい文法のようです。