みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jQuery 動的にボタンが増えた時

<html>
<head>
<title>js sample</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
$(".button_cls_1").click(function(){
alert('hello world! button 1');
});
$(".button_cls_2").click(function(){
alert('hello world! button 2');
});
});
</script>
</head>
<body>
<input class="button_cls_1" type="button" value="テスト1" />
<input class="button_cls_2" type="button" value="テスト2" />
</body>
</html>
上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に
どのように書いたらいいかわかりません。
button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば
button_cls_1、button_cls_2の時もあります。

投稿日時 - 2012-02-24 20:05:12

QNo.7324911

困ってます

質問者が選んだベストアンサー

何をもって対象のボタンと判断するのか条件が不明なので、適当に…

<!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="テスト1">
<input class="button_cls_2" type="button" value="テスト2">
</div>

</body>
</html>


しかし、想像するところ同じ構成のボタンなのでしょうから、class名を分ける必要はないように推測します。
そうすれば(↑)のような面倒なことをしなくても、$(".クラス名")で一括指定が可能だし、後から動的に追加される要素があるとしても(あるのか無いのか不明ですが)、live()が用意されているのでそれを用いれば良さそう。

投稿日時 - 2012-02-24 21:59:46

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問