- ベストアンサー
Jqueryのイベントが動かないケースがある
- Jqueryを使用してイベントによる操作を行う際に、特定のケースでイベントが実行されない問題が発生しています。
- HTMLの読み込み時に指定した要素のクリックイベントは正常に実行されますが、ボタンクリックによって動的に生成された要素のクリックイベントが発生しない現象が発生しています。
- 要素の挿入方法やイベントの更新などを通じて、動的に追加されたコード部分も認識させる方法を教えてください。
- mentaiko2
- お礼率47% (37/78)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ANo1です。 簡単なサンプルを作りましたので、どう違うかを確認してみてください。 （クリックすると共通の処理で色が赤になります） （インデントは全角空白になっています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>Sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> h3{ margin:2em 0 0 0; } ul{ margin:0; } li{ cursor:pointer; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //初期要素にバインド $("#hoge1 li, #hoge3 li").bind("click", handler); //上位要素（ul）でイベントをキャッチ $("#hoge2").on("click", "li", handler); //ボタンクリック時の処理 $("#switch button").bind("click", function(){ append1("#hoge1"); //#hoge1に単に要素を追加 append1("#hoge2"); //#hoge2に単に要素を追加 append2("#hoge3"); //#hoge3にイベントをバインドした要素を追加 }); //単純に要素を追加 function append1(id){ var li = $("<li>追加内容</li>"); $(id).append(li.clone(true)).append(li.clone(true)); } //イベントをバインドした要素を追加 function append2(id){ var li = $("<li>追加内容</li>"); li.bind("click", handler); $(id).append(li.clone(true)).append(li.clone(true)); } //クリック時の処理（共通） function handler(){ $(this).css("color", "red"); } }); </script> </head> <body> <div id="switch"><button type="button">要素を追加</button></div> <h3>要素を単に追加する</h3> <ul id="hoge1"> <li>内容1</li><li>内容2</li><li>内容3</li> </ul> <h3>上位要素でキャッチ</h3> <ul id="hoge2"> <li>内容1</li><li>内容2</li><li>内容3</li> </ul> <h3>イベントをバインドして追加</h3> <ul id="hoge3"> <li>内容1</li><li>内容2</li><li>内容3</li> </ul> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 element.click(function(){～～}); element.bind("click", function(){～～}); などでイベントをバインドした場合は、対象要素とハンドラ―を直接結び付けることでイベント処理を行っています。 この処理を実行した時点で存在しない要素（後から追加・生成した要素など）は、結び付けられないので、当然ながら処理の対象にはなりません。 ご質問のようなケースに対応する方法としては、対象要素に直接結び付けるのではなく、上位要素でイベントをキャッチする方法があります。 http://api.jquery.com/on/ あるいは、要素を追加する際に、同時に必要なイベントのバインドを行うようにしておいてもよろしいかと。
