JQuery中单击函数的问题

Question

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

为什么？

Live Demo

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

您需要使用 event delegation 来动态创建元素：

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

---

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

<强> Updated Fiddle

Answer 2

您的实施问题是当您附加

之类的事件时

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

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

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

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

DEMO

但我建议您使用 Event Delegation 作为

  

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

代码的

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

DEMO with event delegation