このjQueryクリック関数が機能しないのはなぜですか？

116

コード：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

上記のコードは機能しません。#clickerをクリックしても、警告は表示されず、非表示にもなりません。コンソールを確認したところ、エラーは発生しませんでした。また、JQueryがロードされているかどうかも確認しました。実際にロードされています。だから問題が何であるかわからない。私はまた、アラートを使用してドキュメント準備機能を実行しました。助けてください。ありがとう！

— スターバックス
ソース

3

document.readyでコードをラップします

— karthikr

1

エラー、構文、ファイルが見つからないなどの問題がある場合、ブラウザのコンソールを確認しましたか？

— Siddharth Pandey 2013

1

jQueryまたはgetElementByIdなどのDOMメソッドが要素を見つけられない理由の

— user4642212 2018年

179

あなたは$(document).ready(function() {});ブロックにJavaScriptコードを追加することになっています。

すなわち

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

jQueryのドキュメントの状態：準備完了「ページには、ドキュメントがあるまで、安全に操作することができない『』 jQueryのあなたのための準備のこの状態を検出し、コードが内部に含まれていた。。$( document ).ready()唯一のページドキュメントオブジェクトモデル（DOM）一度に実行するJavaScriptの準備ができています実行するコード」

— メビウス
ソース

7

なんてバカなんだ！まだ学習中です。ページの読み込み時にロードされるdocument.readyに対してクリックするとアクティブになるので、クリック機能は必要ありません。

— スターバックス2013

7

@starbucksあまり気にしないでください。誰もが間違いを犯します。特に、学習の場合はそうです:)

— メビウス

4

document ready関数は、ページで検出された内容に基づいてリスナーを設定します。これを行わない場合、設定されません。ただし、これを行う最善の方法は、代わりに "on（）"関数を使用して委任することです。これにより、ロード後にページに追加された要素は引き続き機能します。

— Sean Kendle、2015

1

また、「オン」機能を使用すると、実際にドキュメント準備機能を使用する必要はありません。リスナーをドキュメントレベルに設定し、要素がリッスンするページをスクレイピングします。そのため、「。listentome」ではなく「div.listentome」のように、聞きたい要素タイプについてもう少し具体的にする方が少し速くなります。この例では、「listentome」クラスのすべての要素をチェックする代わりに、divのみをチェックします。

— Sean Kendle 2015

2

@SeanKendle-これは機能しません.on()。（オプションで）委任されたハンドラーを作成するためにそれを使用できますが、「ページをこする」のではなく、呼び出すjQueryオブジェクトの特定の要素にリスナーをバインドします。

— nnnnnn 2017年

65

$（document）でONを使用して、この問題の最良の解決策を見つけました。

 $(document).on('click', '#yourid', function() { alert("hello"); });

IDについては、以下を参照してください。

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

最後に1週間後、onclickトリガーを追加する必要はありません。これが多くの人の役に立つことを願っています

— user5636597
ソース

2

ああ、ありがとう、上記はうまくいきませんでしたが、これはうまくいきました！（おそらく角度とルーティングとの奇妙な相互作用）

— Flink

Flinkと同じように、この問題も解決しました。ありがとう.. 100賛成票..

— ゼータ

3

これは委任と呼ばれ、動的に挿入または移動されたコンテンツに必要です

— mplungjan

これは私のために働いた！おかげで:)

— アムリットパルシン

20

document.ready（）がなくてもコードが機能する場合があります。スクリプトが#clickerの後にあることを確認してください。このデモを確認してください：http : //jsbin.com/aPAsaZo/1/

既成概念のアイデア。スクリプトがページの最新のものであるか、影響を受ける要素の後にあることが確実な場合は、機能します。

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

お知らせ： 中jsbinデモはコードhttpでhttpsそこに置き換えるか、このバリアントのデモを使用します

— SaidbakR
ソース

11

+1-あなたの答えは、なぜそのdocument.ready()機能が必要なのかを説明しています。

— ケビン

1

jqueryスクリプトは「document.ready（）」関数内にある必要があるという提案は誤解を招くので、これはより良い答えです。はい、その方が安全ですが、jquery関数のhtml要素をオンザフライで設定する場合（クリックされたボタンに応じてテーブル行をクエリするなど）、その要素の外側/後である必要があります。ポップアップオーバーレイのターゲットdivの名前を誤って変更してから、スクリプトエラーを探すのに数時間も費やしました。大きな教訓。

— johnlholden 2014年

これは間違った答えです。JSコードはインラインではなくDOMの先頭にある必要があるためです。スクリプトエラーを探すために数時間を費やしたという事実は、JSの問題ではありません。それは、ドキュメントを適切に読み取らず、デバッグツールの使用方法を知らないというあなたの問題です。

— Andrey Shipilov 2016年

@AndreyShipilov誰が言ったのか、このページのソースを見て、一番下に行くと、そこにJavaScriptコードが表示されます。

— SaidbakR 2016

1

@AndreyShipilov- この問題のトラブルシューティングにデバッグツールを使用する方法を知っていますか？次に、あなたの知識を他人に気分を害するのではなく共有してください。建設的かつ公正になるようにしてください。

— マット

6

$(document).ready(function(){});Look this JSfiddleでJavaScriptコードをラップする必要があります。

JSコード：

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

— 黒い羊
ソース

5

追加してみてください$(document).ready(function(){、あなたのスクリプトの先頭に、と});。また、divクラスにではなく、IDが適切に含まれていますか？

— チョン
ソース

3

ボタンをクリックしないようにするボタン（divや透過imgなど）が何もないことを確認してください。ばかげて聞こえるかもしれませんが、jQueryが機能しておらず、問題はDOM要素の配置にあると考えることがあります。

— vicgilbcn
ソース

または、たとえば、z-index！

— 不気味な

3

$(function(){ // code });ドキュメントがそのブロック内のコードを実行する準備ができたときに実行されるwhich を使用できます。

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— ラキェシュ・カダダス
ソース

2

簡単なチェックです。ハンドルバーなどのクライアント側のテンプレートエンジンを使用している場合、jsはdocument.readyの後に読み込まれるため、イベントをバインドする要素がないため、onclickハンドラーを使用するか、本文で使用します。現在のターゲットを確認します

— アビナフ・シン
ソース

そう、私はフラスコ/ジンジャを使用していて、HTMLでonclickプロパティを使用して、そこから<script>の関数を参照しないと機能しません

— Rich Stone