うーん・・・

Jquery on click 発火しない

解決済

質問者：yukimesan
質問日時：2020/08/03 09:04
回答数：3件

下部のHTMLで
　　$("#mtrig").on("click",function(){console.log("test"); } )
では発火しません。

　$("#orderlist").on("click", function(){console.log("test"); } ) や、
　$("#orderlist").on("click", ".minus", function(){console.log("test"); } )
では発火します。
最初のscriptではなぜ発火しないか理由を教えてください。

<div id="temp">
<table id = "orderlist">
<tr>
<td class="td10">name</td>
<td class="plus">+</td>
<td class="td11"> number</td>
<td id="mtrig" class="minus">-</td>
<td class="td12">sum</td>
</tr>
</table>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： fujillin
回答日時：2020/08/03 10:31

No2です。

No1の補足を見て…
＞HTML最後部に<script src="lib/jquery-3.4.1.js"></script>が入っています。

ご提示のスクリプトとの実行順序が逆転していませんか？
jQueryを読込む前に実行しても、エラーになって処理されません。
わからない場合は、「発火しません。」の場合の全文をご提示いただければ、原因がわかるのではないかと思います。

…などというよりも、以下でちゃんと発火することをご確認あれ。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
</head>
<body>

<div id="temp">
<table id = "orderlist">
<tr>
<td class="td10">name</td>
<td class="plus">+</td>
<td class="td11"> number</td>
<td id="mtrig" class="minus">-</td>
<td class="td12">sum</td>
</tr>
</table>
</div>

<script type="text/javascript">
$("#mtrig").on("click",function(){console.log("test"); } )
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご丁寧な回答ありがとうございます。

その後試行錯誤続け、解決ではありませんがどうやら私の実行環境依存のように思われます。
この現象が起こるのはtable tagにid(orderlist)を設定すると発生します。<table id="orderlist">を単に<table>とすれば$(#mtirg).onで発火しました。理由はわかりませんので不安ですが、
$("#orderlist").on("click", ".minus", function(){console.log("test"); } )こちらで対応しようと思います。

ありがとうございました。

通報する

お礼日時：2020/08/03 11:17

参考程度に

No.2

回答者： fujillin
回答日時：2020/08/03 09:51

こんにちは

＞最初のscriptではなぜ発火しないか理由を教えてください
発火しています。
クリックの対象が一文字なので「-」部分をちゃんとクリックしないと発火しません。

他の「発火します」のスクリプトも同様なので、多分、そのようなことは無いと思いますが、以下、念のため。
ドキュメントを読み込んだ後にご提示のスクリプトを実行していないと、イベントのバインドがうまくできませんので、見た目には「発火しない」ようになる可能性はあります。