为使用jQuery动态创建的按钮添加点击事件[重复]

Question

如何在使用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： 如何获取单击事件中按钮的值？例如，我想在点击事件函数中获取值“动态按钮”。

你们能帮帮我吗？

Answer 1

只需使用 jQuery 创建一个按钮元素，并在创建时添加事件处理程序：

var div = $('<div />', {'data-role' : 'fieldcontain'}),
    btn = $('<input />', {
              type  : 'button',
              value : 'Dynamic Button',
              id    : 'btn_a',
              on    : {
                 click: function() {
                     alert ( this.value );
                 }
              }
          });

div.append(btn).appendTo( $('#pg_menu_content').empty() );

FIDDLE

Answer 2

问题 1：在 div 上使用 .delegate 将点击处理程序绑定到按钮。

问题 2：在点击处理程序中使用 $(this).val() 或 this.value（后者会更快）。 this 将引用该按钮。

$("#pg_menu_content").on('click', '#btn_a', function () {
  alert($(this).val());
});

$div = $('<div data-role="fieldcontain"/>');
$("<input type='button' value='Dynamic Button' id='btn_a' />").appendTo($div.clone()).appendTo('#pg_menu_content');

Answer 3

使用

$(document).on("click", "#btn_a", function(){
  alert ('button clicked');
});

为动态创建的按钮添加监听器。

alert($("#btn_a").val());

会给你按钮的价值

Answer 4

使用绑定到容器的委托事件处理程序：

$('#pg_menu_content').on('click', '#btn_a', function(){
    console.log(this.value);
});

即绑定到JS运行时存在的元素（我假设页面加载时#pg_menu_content存在），并在.on()的第二个参数中提供一个选择器。当#pg_menu_content 元素上发生点击时，jQuery 会检查它是否应用于与#btn_a 选择器匹配的该元素的子元素。

在创建按钮后，要么绑定一个标准的（非委托的）点击处理程序。

无论哪种方式，在点击处理程序中this 将引用相关按钮，因此this.value 将为您提供它的值。