javascript - 无法在动态创建的 html 按钮上执行 javascript

Question

我对 javascript/jquery 很陌生，所以我需要一些帮助。这就是问题所在。我有一个页面，其中一个按钮触发一个 jquery 动画以显示一个登录表单。(它只是替换了它所在位置的以前的 html)在登录表单上，我动态创建了一个按钮来隐藏登录表单，并显示原始 html。但是那个按钮不能被.click方法调用，甚至连OnClick属性都不起作用!有什么建议吗？

$(document).ready(function() {
$("#login_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").empty();
$("#menu").append('<button id="back_button"></button>');
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});

然后监听“back_button”点击的代码:

$(document).ready(function() {
$("#back_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").append(//Regular HTML);
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});

javascript 不能在我另一个 javascript 生成的元素上执行吗？任何想法都会很棒!提前致谢!

Answer 1

更改后退按钮的代码:

$("#back_button").click(function() {

到

$(document).on('click', "#back_button", function() {

动态创建元素时，需要使用jQuery的.on()功能。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.