Javascript JQuery中单击函数的问题

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

为什么

您需要为动态创建的元素使用：

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

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

---

实现的问题在于，当您附加事件时

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

不过，我建议您使用

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

代码

---

，而不是将事件绑定到“$”。edit“您需要将事件绑定到$edit。我将解释您在上述代码中的错误-下面有合适的代码修复程序。创建$edit，然后为类为.edit的所有元素创建事件处理程序。然后向页面添加$edit。创建事件处理程序时，该元素不在页面上，因此不会附加该元素。然后，当您再次运行该函数时，它会将自身附加到页面上的编辑元素，现在是第一个元素，但第二个元素还不存在，依此类推。我希望这是有意义的。这将解决问题，是一种比OP更有效的方法，但请在回答中解释，他只需要在职能范围外做一次。当然，活动授权是正确的方法。@Archer，同意这正是我在回答中提到的，但OP也需要知道他做错了什么。你还没有解释他做错了什么，或者为什么在这种情况下事件授权更好。没有人费心在这个网站上解释事情。他们只是饥肠辘辘，不关心社区。悲哀的

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

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

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