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所建议的那样，您需要将click处理程序移到函数外部，以避免嵌套的click事件多次触发。

更新小提琴

Answer 2

实现的问题是，当您附加事件时，例如

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

您刚才创建的Edit元素不会添加到DOM中， 而是仅绑定到div，而div不会添加到DOM中 。 因此，简而言之，它在DOM中不存在，因此事件未与按钮绑定。

因此，要解决此问题，而不是将事件绑定到$('.edit')您需要将事件与$edit绑定。

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

演示

但是我建议您将事件委托用作

通过事件委托，我们可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

码

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

带有事件委托的演示