关于javascript：为使用jQuery动态创建的按钮添加click事件


Adding click event for a button created dynamically using jQuery

本问题已经有最佳答案，请猛点这里访问。

如何在使用jquery动态添加的按钮上添加按钮单击事件？

在div容器中添加动态按钮的jquery代码：

1
2
3
$('#pg_menu_content').empty();
$div = $('');
$("<input type='button' value='Dynamic Button' id='btn_a' />").appendTo($div.clone()).appendTo('#pg_menu_content');

问题1：如何为上述按钮添加单击事件？我尝试了下面的方法，但没有触发

1
2
3
$("#btn_a").click(function(){
  alert ('button clicked');
});

问题2：如何获取Click事件中按钮的值？例如，我想在click事件函数中获取值"dynamic button"。

你们能帮我一下吗？

相关讨论

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

1
2
3
$('#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将为您提供其值。

相关讨论

使用

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

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

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

会给你按钮的值

只需使用jquery创建一个button元素，并在创建它时添加事件处理程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
var 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() );

小提琴

问题1：使用DIV上的.delegate将单击处理程序绑定到按钮。

问题2：在单击处理程序中使用$(this).val()或this.value(后者更快)。this将指按钮。

1
2
3
4
5
6
$("#pg_menu_content").on('click', '#btn_a', function () {
  alert($(this).val());
});

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