使用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： 我怎样可以在点击事件（click event）中获得按钮的值？例如，我想在点击事件函数中获取“Dynamic Button”这个值。

请问大家能帮帮我吗？

- Malaiselvan

---

要么在元素被添加后绑定事件，要么将事件委托给总是存在于DOM中的其父元素。 - PSL

这个视频对我很有帮助 - https://www.youtube.com/watch?v=unk-U_LQWuA - Prem

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将给出其值。

- nnnnnn

---

如果元素已经存在，那么看起来这将导致处理程序触发两次。 - Jiho Kang

@JihoKang - 不会的。为什么会呢？只有一个处理程序。 - nnnnnn

this is a raw DOM element so needs re-wrapping for jquery functionality, ie, $(this) - Chris

Answer 2

使用

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

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

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

将会给你按钮的值

- Lloyd Banks

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() );

FIDDLE

- adeneo

Answer 4

问题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');

- Mike