无法在动态创建的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()函数.

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时的页面上.要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.