javascript - 追加后jquery事件不起作用

Question

http://jsfiddle.net/YsnhT/2/

Jquery 事件在附加后不起作用。单击保存按钮后，我需要 textarea 的值。

$('.span8')
    .on('click',
            '.btn',
            function() {
        var input = $("#textarea").val();
        alert(input);
    });

$('body').on('click','#createNote',function() {                $('.span8').empty();
                $('.span8').append('<button type="button" class="btn" style="float: right; margin-right: 8px;background-color:#dddddd;font-family:Roboto Slab;color: black" id="save" data-loading-text="Saving...">Save</button><div class="hero-unit"><input type="text" style="width: 100%" id="title" placeholder="Title"/>'+ 
                '<textarea contenteditable="true" id="textarea" class="textarea" placeholder="Enter text ..."style="width: 100%;">dd</textarea></div>');

            });

HTML:

<div class="span8"></div>

Answer 1

由于 #save 是动态创建的，因此使用以下处理程序:

$(document).on('click', '#save' ,function() {
    //do stuff
});

更新 fiddle :http://jsfiddle.net/tymeJV/YsnhT/3/

你也应该像这样制作你的“点击”按钮处理程序，否则它不会在新创建的 #click 按钮上触发。