用jQuery生成的按钮不起作用

Question

我使用此指令创建了一个按钮列表：

$("ul#cards").append("<li><button id="modifiedCard" type="button" class="btn btn-primary btn-xs pull-left">Modified</button></li>");

好的，它有效。按钮生成正确。

在我写的同一页中：

$("#modifiedCard").click(function () {
    alert("Hello!");
});

但是，当我点击其中一个警报时，警报无法启动。

我尝试过：

<button id="modifiedCard">Try</button>

并开始提醒。

为什么？

Answer 1

您需要使用事件委派将事件附加到动态添加的DOM：

$("ul#cards").on('click','#modifiedCard',function () {
  alert("Hello!");
});

另请注意，您要附加元素。这将生成具有相同ID的按钮。这是无效的标记。 ID应始终是唯一的。我建议您使用modifiedCard作为类名而不是ID

$("ul#cards").append("<li><button type="button" class="modifiedCard btn btn-primary btn-xs pull-left">Modified</button></li>");

然后使用类选择器进行事件委托。像这样：

$("ul#cards").on('click','.modifiedCard',function () {
  alert("Hello!");
});

Answer 2

Delegate events用于动态创建的元素：

$(document).on('click', '#modifiedCard', function () {
  alert("Hello!");
});

或具体来说：

$("ul#cards").on('click', '#modifiedCard', function () {
  alert("Hello!");
});