动态创建的按钮不起作用

Question

我已经将此代码替换为另一个按钮：

("#addEntry").replaceWith($('<button class="btn default add-entry" id="update">Update</button>'));

Chrome开发者工具显示此按钮已创建。但是，当我想添加一个事件处理程序时，它就不起作用了！

$("#update").on("click", updateEntry);

function updateEntry () {
    alert("started");
};

有人能解释我做错了什么吗？提前致谢

Answer 1

这应该有效：

$(document).on("click", "#update", updateEntry);

Answer 2

由于按钮是动态添加的，因此您需要使用event delegation来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '#update', updateEntry);

如果可能，请使用最近的静态父元素 ID 或类替换document，将container称为 ID < / em>的。然后代码就像：

$('#container').on('click', '#update', updateEntry);

这会将您的活动附加到#container元素中的任何按钮， 减少必须检查整个document元素树并提高效率的范围。

Answer 3

您必须使用委托：

$(document).on("click", "#update", updateEntry);

看看Direct and delegated events。

Answer 4

尝试

$("body").on("click","#update", updateEntry);

Answer 5

使用class not ID，否则页面中有多个Id。   也试试这种方式。

$("body").on("click",".update", updateEntry);

function updateEntry () {
    alert("started");
};

注意:( .update）类