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

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: 如何在click事件中获取按钮的值？例如,我想在click事件函数中获取值'Dynamic Button'.

你能帮帮我吗？

Answer 1

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

$('#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会为您提供其值.

Answer 2

使用

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

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

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

会给你按钮的值

Answer 3

只需使用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() );

小提琴