追加后jquery事件无法正常工作

时间:2013-05-09 12:42:58

标签: javascript jquery

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>

5 个答案:

答案 0 :(得分:15)

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

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

更新了小提琴:http://jsfiddle.net/tymeJV/YsnhT/3/

您还应该像这样制作“点击”按钮处理程序,否则它将不会触发新创建的#click按钮。

答案 1 :(得分:3)

只需以动态格式委派活动:

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

也许也可以这样做:

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

答案 2 :(得分:1)

保存是在这里动态创建的。所以尝试使用on

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

答案 3 :(得分:0)

一旦你附加了元素,你需要将处理程序重新绑定到它或使用jQuery的live()函数,如下所示:

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

答案 4 :(得分:0)

检查一下......

$('。btn')。click(function(){

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

});