javascript - 单击按钮即可创建警报

Question

我创建一个按钮:

var removeButton = document.createElement('button');
    $(removeButton).attr('class', 'removeProduct');
    $(removeButton).append(document.createTextNode('X'));
    $(removeButton).data('divId', 'productLine' + numProductsInCart);

这有效，按钮出现。

但是，当我尝试在单击该按钮时发出警报时，它不起作用。我点击了按钮，但它没有执行任何操作。

这是到目前为止我所要做的:

$('.removeProduct').click(function() {
    alert("Hey");
});

Answer 1

我假设您在将按钮添加到 DOM 之前尝试绑定(bind)事件处理程序。如果是这种情况，您需要将事件处理程序委托(delegate)给 DOM 树的更高层:

$("#someAncestorElement").on("click", ".removeProduct", function() {
    alert("Hey");
});

这是可行的，因为 DOM 事件倾向于从它们起源的元素开始冒泡到树中。您可以在任何祖先元素处捕获事件。 on method将检查事件目标是否与选择器匹配，如果匹配则运行事件处理程序。请注意，如果您使用的 jQuery 版本低于 1.7，则需要使用 delegate而不是on。

或者，您可以在创建元素后绑定(bind)事件处理程序:

$(removeButton).on("click", function() {
    alert("Hey");
});