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之后附加事件处理程序放入页面。

Answer 2

您尝试在加载时添加点击处理程序，但尚未创建<button>。在创建按钮后，在创建按钮的相同代码中添加click功能。

Answer 3

您需要事件委派

$(document).on('click', '#back_button', function() {
  // do your stuff here
});

http://api.jquery.com/on/

Answer 4

这是因为当执行后退按钮的javascript时，实际元素不存在。

而是使用.on绑定click事件。

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

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

4 个答案: