<a>タグをクリックしてイベントは動作しません

I持って、次のHTML（+かみそり）：<a>タグをクリックしてイベントは動作しません

<div id = "years" class="btn-group btn-group-justified timeline"> 
    <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a> 
    <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a> 
    <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
</div>

が、私は単にクリックで起こるためのボタンや何かのように、これらの用途を持っていると思います。したがって、私は動作しません次のjqueryを持っています：

$(".btn a").click(function() { 
     console.log('click'); 

      var txt = $(this).text(); 
      console.log(txt); 
      alert(txt); 


    });

私は単にオンクリックの間に値を持っていたいと思います。今、ボタンの1つをクリックすると何も起こりません。私はコンソール上に「クリック」しても、タグ内のテキストで警告を受け取ることもできません。誰かがこの仕事をするのを助けることができますか

出典

2017-02-01 Robert Ross

この '$（ "a.btn" のようにしてみてください） ' –

clickイベントハンドラを別のイベントハンドラにバインドしますか？あなたは何を達成しようとしていますか？ –

をやっていることを知っている場合を除きます。このコード

を試すことができ、他のイベントハンドラ内でイベントリスナーを作成することをお勧めではありません

例＃1：

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id = "years" class="btn-group btn-group-justified timeline"> 
 
    <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a><br><br> 
 
    <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a><br><br> 
 
    <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
 
</div> 
 
<script> 
 
$("a.btn").click(function(e){ 
 
e.preventDefault(); 
 
console.log(this); 
 
alert("click"); 
 
}); 
 
</script> 
 
</body> 
 
</html>

例＃2：

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id = "years" class="btn-group btn-group-justified timeline"> 
 
    <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a><br><br> 
 
    <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a><br><br> 
 
    <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
 
</div> 
 
<script> 
 
    // without a 
 
$(".btn").click(function(e){ 
 
e.preventDefault(); 
 
console.log(this); 
 
alert("click"); 
 
}); 
 
</script> 
 
</body> 
 
</html>

例＃3：

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id = "years" class="btn-group btn-group-justified timeline"> 
 
     <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a><br><br> 
 
     <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a><br><br> 
 
     <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
 
    </div> 
 
    <script> 
 
     
 
    $("#years a").click(function(e){ 
 
     console.log(this); 
 
    e.preventDefault(); 
 
    alert("click"); 
 
    }); 
 
    </script> 
 
    </body> 
 
    </html>

出典

2017-02-01 18:53:26 fonjeekay

jqueryセレクタが何も見つからないように、囲むdivのクラスが.btnではありません。試してみてください：

$(".btn-group a").click(...)

出典

2017-02-01 18:43:04 MikeS

$(".btn a")は.btnクラスの子孫です<a>タグを探しています。これはあなたのものではありません

内側のリスナーを使い、外側のリスナーを取り除くだけです。あなたが本当に十分な理由を持っていて、

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="years" class="btn-group btn-group-justified timeline"> 
 
     <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a> 
 
     <br> 
 
     <br> 
 
     <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a> 
 
     <br> 
 
     <br> 
 
     <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
 
    </div> 
 
    <script> 
 
     $("#years a").click(function(e) { 
 
      console.log(this); 
 
      e.preventDefault(); 
 
      alert("click"); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-02-01 18:44:04 charlietfl

答えをありがとう。それは私がやろうとしていたことをする –

<a>タグをクリックしてイベントは動作しません

答えて

関連する問題