标签 javascript jquery html
<分区>
如何在使用 jQuery 动态添加的按钮上添加按钮单击事件？
在 div 容器中添加动态按钮的 jQuery 代码:
$('#pg_menu_content').empty();
$div = $('<div data-role="fieldcontain"/>');
$("<input type='button' value='Dynamic Button' id='btn_a' />").appendTo($div.clone()).appendTo('#pg_menu_content');
问题 1: 如何为上面的按钮添加点击事件？我试过下面的，它没有触发
$("#btn_a").click(function(){
alert ('button clicked');
});
问题 2: 如何获取点击事件中按钮的值？例如，我想在点击事件函数中获取值“动态按钮”。
你们能帮我解决这个问题吗？
最佳答案
使用绑定(bind)到容器的委托(delegate)事件处理程序:
$('#pg_menu_content').on('click', '#btn_a', function(){
console.log(this.value);
});
也就是说，绑定(bind)到 JS 运行时存在的元素(我假设 #pg_menu_content 在页面加载时存在)，并在第二个参数中提供选择器 .on()。当单击 #pg_menu_content 元素时，jQuery 会检查它是否应用于该元素的子元素，该子元素与 #btn_a 选择器匹配。
要么在创建按钮后绑定(bind)标准(非委托(delegate))点击处理程序。
无论哪种方式，在点击处理程序中 this 将引用有问题的按钮，因此 this.value 将为您提供它的值。
关于javascript - 为使用 jQuery 动态创建的按钮添加点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20253246/