The jquery event does not work after adding


Jquery event on is not working after the append. I need the value of textarea after I click save button.

            function() {
        var input = $("#textarea").val();

$('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>');



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

Since #save is dynamically created, use the following handler:

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

Updated fiddle:

You should also make your "click" button handler like this, or else it will not fire on newly created #click buttons.