2011-08-17 10 views
0

ボタンがあります。このボタンをクリックすると、2番目のボタンが動的に作成されます。私は動的に作成されたボタン(2番目のボタン)にクリックイベントを配置する必要がありますが、私のクリック機能は機能していません。jqueryで動的に作成された要素にアクションを追加するにはどうすればよいですか?

クリック機能を動的に作成された要素で使用するにはどうすればよいですか?

+2

はあなたがあなたがこれをやっている様子を見せてくれる? –

+0

コードとエラーメッセージ、または動作しないという具体的な説明を示してください。 –

答えて

1

あなたはhere見つけることができますjQueryの.live()機能を使用する必要があります。

例:

$('button').live('click', function(){ 
    ... 
}); 
+0

驚くばかり、私が探していたもの! –

2

クリックイベントは、作成後に2番目のボタンにバインドする必要があります。または、jQueryライブ関数または代理関数を使用します。

http://api.jquery.com/delegate/

ルート 要素の特定のセットに基づいて、現在または将来に セレクタ、に一致するすべての要素の1つ以上のイベントのハンドラを取り付けます。

これ以上のヘルプが必要な場合は、いくつかのコードを投稿してください。

1

Here is an example

マークアップ:

<button id="create">Create</button> 

<div id="container"> 
</div> 

スクリプト:あなたはjqueriesを使用してイベントを添付する必要が

var count = 0; 
$("#create").click(function(e) { 
    var num = count += 1; 
    var newButton = $("<button>New " + num + "</button>").click(function() { 
     alert("Button " + num + " was clicked."); 
    }); 
    $("#container").append(newButton); 
}); 
0

メソッドを生きます。このイベントは、現在および将来の要素のすべてのインスタンスにバインドされます。

$('.classname').live('click', function() { 
    alert("triggered"); 
}); 

このようにして、同じクラスの要素をさらに挿入した場合でも、クラス名がclassnameのすべての要素にclickイベントが追加されます。

0
<input id="but1" type="button" value="click"></input> 
<script> 
$(document).ready(function(){ 
    $('#but1').click(function(){ 
    var button = $(document.createElement('input')); 
     button.attr('id', 'but2'); 
     button.val('but2'); 
     button.attr('type', 'button'); 
     button.click(function(){alert('hello');}); 

     $(document.body).append(button); 

    }); 

}); 
</script> 
3

私はjQueryのはそれを行うための正しい方法があるV1.7ので、この質問は長い間前に...
頼まれた知っている:

$(document).on("click",'.myNewlyCreatedElement', function() { 
    // Your action 
}); 

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