- ベストアンサー
jQueryで動的にボタンを追加した時の対応方法
- jQueryを使用してボタンを動的に追加する際の対応方法について解説します。button_cls_1やbutton_cls_2だけでなく、button_cls_3やbutton_cls_4など、複数のボタンに対応する方法も紹介します。
- HTMLとjQueryを使ってボタンを動的に追加する方法を解説します。button_cls_1やbutton_cls_2だけでなく、button_cls_3やbutton_cls_4など、さまざまなボタンに対応できるコードの書き方も紹介します。
- button_cls_1やbutton_cls_2が動的に追加されたときの対応方法について解説します。HTMLとJavaScriptを組み合わせて、ボタンが増えたときにも正しく動作するようにする方法を紹介します。また、button_cls_3やbutton_cls_4にも対応する方法も説明します。
- katsuhiko_chi
- お礼率0% (0/7)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
何をもって対象のボタンと判断するのか条件が不明なので、適当に… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <script type="text/javascript"> <!-- $(document).click(function(e){ var t = e.target, m = $(t).attr("class").match(/(?:^| )button_cls_(\d+)(?: |$)/); if(t.nodeName=="INPUT" && t.type=="button" && m) alert("hello world! button " + m[1]); }); //--> </script> </head> <body> <div> <input class="button_cls_1" type="button" value="テスト１"> <input class="button_cls_2" type="button" value="テスト２"> </div> </body> </html> しかし、想像するところ同じ構成のボタンなのでしょうから、class名を分ける必要はないように推測します。 そうすれば（↑）のような面倒なことをしなくても、$(".クラス名")で一括指定が可能だし、後から動的に追加される要素があるとしても（あるのか無いのか不明ですが）、live()が用意されているのでそれを用いれば良さそう。
