web-dev-qa-db-ja.com

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

コード：

<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がロードされているかどうか、また実際にロードされているかどうかを確認しました。だから問題が何であるかわからない。私はまた、アラート付きの文書準備機能を実行しましたが、それがうまくいったので、自分が何をしているのかわからないのです。助けてください。ありがとうございます。

javascriptjqueryonclickclickonclicklistener
103
starbucks

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

つまり.

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

As jQuery documentation 状態：「ドキュメントが「準備完了」になるまでページを安全に操作できません。jQueryはこの準備状態を検出します。$( document ).ready()に含まれるコードは1回だけ実行されますページDocument Object Model（DOM）はJavaScriptコードを実行する準備ができています」

167
mobius

$（document）と共にONを使用することで、この問題に対する最良の解決策を見つけました。

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

iDは下記を参照してください。

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

1週間後にようやくonclick trigerを追加する必要がなくなりました。これが多くの人に役立つことを願っています

44
user5636597

あなたのコードは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に置き換えるか、この変形を使用してください Demo

21
SaidbakR

Javascriptコードを$(document).ready(function(){});でラップする必要があります。これを参照してください JSfiddle 。

JSコード：

$(document).ready(function() {

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

スクリプトの先頭に$(document).ready(function(){を追加してから、});を追加してください。また、divはその中に適切にidを持っていますか、すなわち、クラスとしてではなく、idとしてですか。

5
tjons

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

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

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

3
vicgilbcn

簡単なことですが、ハンドルバーなどのクライアントサイドのテンプレートエンジンを使用している場合、jsはdocument.readyの後にロードされます。そして現在のターゲットをチェック

2
Abhinav Singh