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之前尝试绑定事件处理程序。如果是这种情况，您需要将事件处理程序委托给DOM树的更高位置：

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

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

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

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

Answer 2

试试这个

$(document).ready(function(){
    $('.removeProduct').live("click", function() {
        alert("Hey");
    });
});

Answer 3

您可能尝试在将按钮添加到文档之前选择该按钮（$('.removeProduct')）（我在示例代码中没有看到您将其添加到文档中）。添加removeButton处理程序时，您无法使用现有的onclick引用吗？

Answer 4

确保第二位代码在第二位之前运行。否则，它没有将按钮的类更新为removeProduct并且没有任何内容可以绑定。

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

Answer 5

尝试on方法：

$('<button>X</button>').addClass('removeProduct').attr('data-Id', 'productLine' + numProductsInCart).appendTo('div');

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

http://jsfiddle.net/9gJPL/1/

Answer 6

您是否尝试在屏幕上附加按钮之前添加点击处理程序？这段代码适合我：

// Append the button
$("body").append(removeButton);

// Now add the handler
$('.removeProduct').on("click", function() {
    alert("Hey");
});

或者你可以在追加之前在按钮上添加处理程序：

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

现在，让我们稍微重构一下代码：

function clickHandler(e) {
    alert("Hey");
}

var removeButton = $("<button/>")
                    .html("X")
                    .addClass('removeProduct')
                    .data('divId', 'productLine' + numProductsInCart)                    
                    .on("click", clickHandler);

$("body").append(removeButton);

希望它有所帮助！

单击按钮创建警报

6 个答案: