Jqueryのイベントが動かないケースがある
- Jqueryを使用してイベントによる操作を行う際に、特定のケースでイベントが実行されない問題が発生しています。
- HTMLの読み込み時に指定した要素のクリックイベントは正常に実行されますが、ボタンクリックによって動的に生成された要素のクリックイベントが発生しない現象が発生しています。
- 要素の挿入方法やイベントの更新などを通じて、動的に追加されたコード部分も認識させる方法を教えてください。
- ベストアンサー
Jqueryのイベントが動かないケースがある
Jqueryを使ってイベントによる実行をしています。 上手く行くケース html読み込み時にあるi要素のクリックイベント に関しては問題なく実行されました。 hogehogeRegisterEvent : function(container){ var thisInstance = this; container.find('.iで指定した名称').on("click",function(e){ 処理; }); その他処理 }, という感じで指定したところできました。 それを ボタンクリックをした時にjavascriptにて、i要素を作成してそれをクリックするとイベントが発生しません。 挿入処理は var cell = row.insertCell(2); cell.innerHTML = "i要素を挿入"; という感じでテーブル内部にinsertCellで行っています。 そもそもこの方法だと上手く認識してくれないものなのでしょうか？ 上手く認識させるための要素挿入方法もしくは、イベントをリフレッシュするなどして追加したコード部分も認識させる方法を教えてください。
- 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/ あるいは、要素を追加する際に、同時に必要なイベントのバインドを行うようにしておいてもよろしいかと。
関連するQ&A
- 【jQuery】for文ではイベント登録できない？
複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; for(i=0; i<buttonArray.length; i++){ $(buttonArray[i]).click(function(){ $(divArray[i]).animate({width: "0px"}, "slow", "swing"); }); } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; $(buttonArray[0]).click(function(){ $(divArray[0]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[1]).click(function(){ $(divArray[1]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[2]).click(function(){ $(divArray[2]).animate({width: "0px"}, "slow", "swing"); }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか？ ・今回のようなケースの場合、どのように書くのが適切か？ 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQuery イベントの繰り返し
jQuery イベントの繰り返し ボタンが.button1から.button10まであり、それぞれを押すと .imgareaに1.ipgから10.jpgまでを表示させたいと思っています。 jQueryで下記のように書いたのですが、 最後のiが10のときのイベントしか反映されません…。 うまく記述するにはどうすればよいでしょうか？ よろしくお願いいたします。 for(i=1; i<=10; i++){ $(".button"+i.toString()).click(function(){ $(".imgarea").attr("src",i.toString()+".jpg"); }) }
- ベストアンサー
- JavaScript
- JavaScriptのイベントの付加で悩んでいます
すいません、分からないので教えてください。IEの場合です。 var Test = function() {}; Test.prototype = { a_method: function() { var self = this; for (var i=1; i<=10; i++) { $('nantoka' + i).attachEvent('onclick', function(event) { self.b_method(i); }); } }, b_method: function(i) { alert(i); } }; 例えば上のようなコードがあり、bodyの中には<img id="nantoka1" />のようなimgタグがnantoka1からnantoka10まであるとします。 この状態でnantoka1～nantoka10をクリックすると、それぞれに対応した画像の番号(1～10)を表示したいのですが、上に示したコードだと、どれをクリックしても番号が10になってしまいます。 イベントの設定が上手くいってないのは自分でも分かるのですが、具体的にどう書けばいいのかわかりません。アドバイスお願いします。 _(._.)_
- ベストアンサー
- JavaScript
- jQueryで設定したイベントハンドラが消える
jQueryについての質問です。 ちょっと言葉での説明が難しいので、具体的なコードを記載します。 === JavaScript === var clicked = function () { alert(1); }; var jqButton = $("<input type='button' value='test' />"); jqButton.click(clicked); $(function() { $("#showButton").click(function () { $("#test").html(jqButton); }); $("#hideButton").click(function () { $("#test").html(""); }); }); === HTML === <input type="button" id="showButton" value="show" /> <input type="button" id="hideButton" value="hide" /> <div id="test"></div> showボタンをクリックすると、testボタンが表示されます。 hideボタンをクリックすると、testボタンが消えます。 testボタンをクリックすると、alert(1) が実行されます。 という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、 何も起きません。 仮に、jqButton.click(clicked); の部分を、 jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。 これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、 なぜこのような結果になるのでしょうか。 てっきり、$.click()でイベントハンドラを設定すると、 内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・ また、attachEventなど使わずに、jQueryの機能を使って、 再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。 ご存知の方いましたら、お願い致します。
- ベストアンサー
- JavaScript
- イベントに独自引数を渡したい。
ACTIONSCRIPT3.0で、外部ファイルを読み込ませる処理を行っているのですが、読み込み完了時の関数に独自の引数を渡すことは不可能なのでしょうか？ var j:int = 100; var myArray:Array; for(var i=0;i<j;i++){ myArray[i] = new Loader(); myArray[i].load(new URLRequest(別の配列に入っている文字列のURL)) myArray[i].contentLoaderInfo.addEventListener(Event.INIT,myfunc); } function myfunc(e){イベント発生時の処理} のように、多数のイベント処理を書くときに配列のインデックスによって処理を分けたいのですが、上の例だとイベント発生時の関数であるmyfuncの引数は規定オブジェクトなので独自のものが渡せません。 いまは別にグローバルな配列を作成して処理をしているのですが、メモリ常駐になることや、オブジェクト指向として気に入らない状態です。 イベントが発生したオブジェクトの名前をキーにすることも考えましたが、どの道スマートではない。なにか方法はないものでしょうか？ また、言語仕様的にやむをえないのでしょうか？
- ベストアンサー
- Flash
- jQueryで指定された要素のIDに触れた時イベントを起こしたいのです
jQueryで指定された要素のIDに触れた時イベントを起こしたいのですがうまくいかずに困っています。 jQuery(document).ready(function($) { var msg = ""; $("#Div11").mouseover(function() { msg = "おはよ" alert(msg); }); $("#Div2").mouseover(function() { msg = "こんにちは" alert(msg); }); $("#Div3").mouseover(function() { msg = "うっすー" alert(msg); }); $("#Div4").mouseover(function() { msg = "お疲れ様でした" alert(msg); }); $("#Div5").mouseover(function() { msg = "こんばんは" alert(msg); }); }); このような記述をしているのですがIDに触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います！
- ベストアンサー
- JavaScript
- jQueryのイベント
いつもお世話になっております。 jQueryでスマートフォンのアプリを作成しております。 背面に画像（１）を配置して、その画像の上にさらに画像（２）を配置し （１）のクリックイベントの取得がしたいのですが どのように実装したらよろしいでしょうか。 クリックイベントのほかにスクロールの処理があるので こちらの実装方法も合わせてご教示いただけると幸いです。
- ベストアンサー
- JavaScript
- jquery の clickイベント
いつもお世話になっております。 当方jQueryは初めてで試行錯誤しながら使っています。 標題について質問です。 <form> <input type="text" id="code[1]" value="00001"> <input type="submit" id="add[1]"> <input type="submit" id="del[1]"> </form> 上記のフォーム文で、 jQuery.noConflict(); jQuery(document).ready(function($){ $("input").click(function(){ var e = $(this).attr("id"); }); }); とし、上のform文を直接書いた場合は押されたボタンが認識されるのですが、 form文をajax通信でinnerHTMLで出力されたボタンを押した時は ボタンを押してもイベントを認識してくれません。 これはinnerHTMLで出力しているからなんでしょうか。 何度やっても分からず質問させて頂きました。 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascript マウスイベント
動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。
- ベストアンサー
- JavaScript
- イベントハンドラメソッドが実行される？
環境 Flash8 / FlashPlayer8 lis.onLoadInitが何故実行されるのか理解できないので 教えてください。 私の考えは、lisはローカル変数なので、startLoadの実行が終わると lisが破棄されるので、list.onLoadInitが実行されないと思ったのですが list.onLoadInitが実行されてます。 *サンプルコード function startLoad():Void { var container:MovieClip = createEmptyMovieClip("container", getNextHighestDepth()); var mcLoader:MovieClipLoader = new MovieClipLoader(); var lis = new Object(); lis.onLoadInit = function() { trace(1); } mcLoader.addListener(lis); mcLoader.loadClip("***", container); } startLoad();
- ベストアンサー
- Flash
