jquery - jQueryで要素を作成して使用する

Question

たとえば、次のようなものがあります。

<div id="buttons">
    <button class="button">Click</button>
</div>

<script>
    $(document).ready(function() {
        $('.button').click(function() {
            $('#buttons').append('<button class="button">Click</button>');
        });
    });
</script>

「クリック」ボタンを押すと、スクリプトは同じクラス「ボタン」を持つ新しいボタンを作成します。この新しいボタンを押しても何も起こりません。

理由はわかりますが、これを回避する方法がわかりません。作成したばかりのボタンをスクリプトで「参照」したい。

Answer 1

on委任されたイベントにバインドするために使用します

$("#buttons").on("click", ".button", function () {
   $('#buttons').append('<button class="button">Click</button>');    
});

例: http://jsfiddle.net/66H8W/

Answer 2

Hiyaデモ: http://jsfiddle.net/vcrF3/ **またはhttp://jsfiddle.net/vcrF3/1/

http://api.jquery.com/on/ 引用

events-map 文字列キーがスペースで区切られた 1 つ以上のイベント タイプとオプションの名前空間を表し、値がイベントに対して呼び出されるハンドラー関数を表すマップ。

Jクエリコード

   $.fn.ready(function() {
       $('div').on("click", ".button",  function() {
           $('#buttons').append('<button class="button">Click</button>');
          // alert('append button is clicked');
        });
    });

Answer 3

http://api.jquery.com/on/を読み、「直接および委任されたイベント」セクションに特に注意してください。