web-dev-qa-db-ja.com

jQueryクラスセレクターが機能しない

特定のクラスのアンカータグがdiv内でクリックされたときに、アラートを表示するのに苦労しています。

問題の私のhtmlセクションは次のようになります...

<div id="foo">
  <a class='bar' href='#'>Next</a>
</div>

JQueryセクションは次のとおりです。

$('.bar').click(function()
{
  alert("CLICKED");
});

私の問題は、このアラートが表示されないことです。クラス「次へ」を適切に選択していると思いますが、何らかの理由でそれを取得しません。私もこれでほとんどすべてを試しました ページ しかし何も機能していません。アンカータグ、つまり$（ '＃foo'）。click（function（）...を指定しようとしない場合は機能しますが、このdiv内には複数のアンカータグがあるため、アラートを実行するだけです。 divをクリックしても、必要な機能が動作しません。このWebサイトは、ajaxを使用してdo_search.phpに情報を送信する検索エンジンです。do_search.php内で、見つかった結果の数に基づいてページ付けを決定します。該当する場合、次、前、最後、および最初のリンクが作成され、エコーされる場合があります。

編集：私はそれを理解しました、それは最初のドキュメントのロード時に作成されなかったので、.next関数の配置でしたが、代わりに結果が返された後、.next関数を成功の部分に移動しましたajax関数は、必要に応じてボタンが作成される場所であるため、機能するようになりました。

javascriptjqueryhtmlselector
14
dan

live()コマンドを使用してみてください。

$(".bar").live("click", function(){ alert(); });

AJAXを介してボタンをロードするため、クリックイベントはボタンにバインドされません。 live（）コマンドを使用すると、ページの読み込み後に作成されたすべての要素にイベントが自動的にバインドされます。

詳細、 ここ

32
linkyndy

あなたは確かに$(document).ready()を逃しました。コードは次のようになります。

  $(document).ready(function(){
      $('.bar').click(function()
      {
        alert("CLICKED");
      });
    });

お役に立てれば。乾杯

7
Edgar Villegas Alvarado

.liveは非推奨になり、このために選択された回答です。答えは、上記で選択した回答のコメントにあります。これが私のためにそれを解決した解決策です：

$(document).on('click','.bar', function() { alert(); });

修正してくれた@Blazemongerに感謝します。

6
nwolybug
  1. _JQuery Library_が正しく含まれていることを確認してください。
  2. スクリプトが$(document).ready() in short $(function(){ });の間に記述されていることを確認してください

デモ： http://jsfiddle.net/W9PXG/1/

_<div id="foo">
  <a class='bar' href='#'>Next</a>
</div>

$(function(){
$('a.bar').click(function()
  {
    alert("CLICKED");
});
});
_
1
mr_eclair