按钮的动态点击事件[重复]

Question

我有一个按钮，它通过数据绑定调用一个函数并生成一个新按钮。

self.submitNewPopUp = function(data, event) {
    var butnId = event.srcElement.form.id.replace('style-', '');
    var styleButton = $('<input/>').attr({type: 'button', value: data.styleData, id: butnId});
    styleButton.onclick = function() {
        alert("blabla");
    };
    $("#showButtons").append(styleButton);
    $('#' + event.srcElement.form.id).hide();

};

但是新按钮没有点击事件。怎么做？

Answer 1

您可以使用jQuery's on() method 将点击事件侦听器分配给按钮的祖先。例如，如果您的标记是：

<div id="showButtons">
    <input type="button" />
</div>

你会使用：

$('#showButtons').on('click', 'input[type=button]', function() { ... });

Answer 2

styleButton 按钮是 jQuery 对象，而不是 dom 元素，因此它没有 onclick 属性。需要使用click(function(){})事件注册方法来注册事件处理程序

styleButton.click(function() {
    alert("blabla");
});

Answer 3

对动态创建的元素使用jquery.on()

$("#div").on("click", "button", function(event){
  alert($(this).text());
});