按钮的动态点击事件

Question

我有一个按钮，它通过data-bind调用一个函数并生成一个新按钮。

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

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

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

Answer 2

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

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

您将使用：

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

Answer 3

将jquery.on()用于动态创建的元素

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