web-dev-qa-db-ja.com

jQuery関数は新しく追加されたdom要素にバインドしません

_index.html_は次のとおりです。

_<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>
_

_test1_リンクをクリックすると、alert('test')が表示されますが、addリンクをクリックしてからtestをクリックしても、何も表示されません。

説明してもらえますか？

javascriptjqueryonclick
75
Ralsk28

2011年以降にこの質問にアクセスするユーザーには、これを行うための新しい適切な方法があります。

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

これはjQuery 1.7以降です。

詳細については、「 直接および委任されたイベント 」を参照してください

211
Moshe Katz

最初は単一の要素のみが存在するため、「ライブ」クリックリスナーを使用する必要があります。

$('.btn_test').live("click", function() { 
   alert('test'); 
});

更新：liveは非推奨であるため、「on（）」を使用する必要があります。

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

34
Doug Molineux

私はちょうど髪を引っ張るのに近かった質問のような同じ問題を抱えていて、解決策を得ました。私は別の構文を使用していました

$(".innerImage").on("click", function(){ 
alert("test");
});

それは私のために働いていませんでした（innerImageは動的に作成されたdom）今、私は使用しています

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

http://jsfiddle.net/SDJEp/2/

ありがとう@Moshe Katz

15
UFM

.clickは、現在jQueryに表示されているものにバインドします。 .liveを使用する必要があります。

$('.btn_test').live('click', function() { alert('test'); });
8
doctorless

代わりにJqueryliveを使用してください。ヘルプのページはこちら http://api.jquery.com/live/

_$('.btn_test').live(function() { alert('test'); });
_

編集：live()は非推奨です。代わりにon()を使用してください。

_$(".btn_test").on("click", function(){ 
   alert("test");
});
_
7
Amir Raminfar

これは、クリックイベントがバインド時に既存の要素にのみバインドされるためです。ライブまたはデリゲートを使用して、イベントをページ上の既存および将来の要素にバインドする必要があります。

$('.btn_test').live("click", function() { alert('test'); });

Jquery Live

3
scrappedcola

クリックする代わりに live listener が必要です：

$('.btn_test').live('click', function() { 
   alert('test'); 
});

理由は、clickはページのロード時にのみリスナーを要素に割り当てるからです。追加された新しい要素には、このリスナーはありません。 Liveは、ページが読み込まれ、後で追加されるときにクリックリスナーを要素に追加します

2
locrizak

ドキュメントが読み込まれたら、一致する各クラスにイベントリスナーを追加して、それらの要素でクリックイベントをリッスンします。同じリスナーは、後でDomに追加する要素に自動的に追加されません。

1
shanethehat

イベントはドキュメント内の一致する各要素に関連付けられているためです。追加された新しい要素には、同じイベントが自動的に関連付けられません。

イベントを追加した後、イベントを新しい要素に手動でバインドするか、ライブリスナーを使用する必要があります。

1
Neil N
$('.btn_test').click

ページで使用可能な要素のハンドラーを追加します（この時点では「テスト」は存在しません！）

追加するときにこの要素のクリックハンドラーを手動で追加するか、後で作成してもすべての要素で機能するliveイベントハンドラーを使用する必要があります。

$('.btn_test').live(function() { alert('test'); });
1
Karoly Horvath

メソッドのjquery 1.7を使用すると、本当にうまくいきます

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

実際にそれを見る http://jsfiddle.net/rahulchaturvedie/CzR6n/

1
Rahul

適切なボタンクリック機能を追加して、適切な結果を得る必要があります

$("#btn1").live(function() { alert("test"); });
0
Salman Ashraf

または、ページの最後でスクリプトを実行します

0
Enigmax