按钮的动态单击事件

Dynamic click event for buttons

本文关键字：事件 单击 动态 按钮      更新时间：2023-09-26

我有一个按钮，它通过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();
};

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

您将使用jQuery的on()方法将单击事件侦听器分配给按钮的祖先。例如，如果您的标记是:

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

你会使用:

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

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

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

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

$("#div").on("click", "button", function(event){
  alert($(this).text());
});
相关文章：