JQuery中单击函数的问题

Question

当我添加评论并点击可点击文本"编辑"时,警报框不会弹出.首先,当我添加第二条评论时,我可以点击第一条评论的"编辑",弹出警告框.

为什么？？

现场演示

function addComment(name1) {

    var container = $('#divComments');
    var inputs = container.find('label');
    var id = inputs.length + 1;

    var div = $('<div />', {
        class: 'CommentStyle'
    });

    $('<label />', {
        id: 'comment' + id,
        text: name1
    }).appendTo(div);

    var d = new Date();
    var $fulaDate = $('<div class="floatleft">' + d.getFullYear() + "-" + monthNames[d.getMonth()] + "-" + d.getDate() + "T" + d.getHours() + ":" + d.getMinutes() + '</div>').appendTo(div);

    var $edit = $('<p />', { class: 'edit', text: 'Edit' }).addClass('edit').appendTo(div);

    $('.edit').click(function () {
        alert('Hallo');

    });

    div.appendTo(container);

}

Answer 1

您需要为动态创建的元素使用事件委派:

$('#divComments').on('click','.edit',function () {
    alert('Hallo');
});

此外,正如@Archer所建议的那样,您需要将单击处理程序移动到函数之外,以避免多次触发嵌套单击事件.

更新小提琴