jquery - jquery で作成したボタンが機能しない

Question

div ボックスにボタンを追加しましたが、新しいボタンにクリック機能を適用できません。この例では、ボタンをクリックして div ボックスの色を変更したいと考えています。

jsフィドル

HTML

<ul id="box"></ul>
<button id="add" type="button">Add button!</button>

jQuery

$("#add").click(function() {

    $("#box").append(' <button class="color" type="button">change color!</button> ');
});


$(".color").click(function(){
    $("#box").css("background","red");
});

Answer 1

適切な作成により、委任に関する問題が解決されます。

$("#add").click(function() {
    var button = $('<button />', {
        'class': 'color',
        type   : 'button',
        text   : 'change color!',
        on     : {
             click: function() {
                   $("#box").css("background","red");
             }
        }
    });

    $("#box").append(button);
});

フィドル

代わりに委任し、文字列を使い続けるには、次のようにします。

$('#box').on('click', '.color', function() {
    $("#box").css("background","red");
});

Answer 2

DOM に追加されていないイベントを html に追加することはできません ステップ 1: DOM にボタンを追加します ステップ 2: ボタンにクリック イベントを追加します

$("#add").click(function() {
    var newButton = $('<button class="color" type="button">change color!</button>');
    $("#box").append(newButton);
    newButton.click(clickNewBtn)
});

function clickNewBtn(){
    $("#box").css("background","red");
}

http://jsfiddle.net/AfUZS/5/