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

时间:2022-09-17 10:59:05

This question already has an answer here:

这个问题在这里已有答案:

How to add a button click event on a button that was added dynamically using jQuery?

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

The jQuery code that adds the dynamic buttons inside a div container:

在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');

Question 1: How can I add a click event for the above button? I tried the below and it has not triggered

问题1:如何为上面的按钮添加点击事件?我尝试了以下,它没有触发

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

Question 2: How can I get the value of the button inside the click event? For example I want to get the value 'Dynamic Button' inside the click event function.

问题2:如何在click事件中获取按钮的值?例如,我想在click事件函数中获取值'Dynamic Button'。

Can you guys please help me on this.

你能帮帮我吗?

4 个解决方案

#1


68  

Use a delegated event handler bound to the container:

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

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

That is, bind to an element that exists at the moment that the JS runs (I'm assuming #pg_menu_content exists when the page loads), and supply a selector in the second parameter to .on(). When a click occurs on #pg_menu_content element jQuery checks whether it applied to a child of that element which matches the #btn_a selector.

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

Either that or bind a standard (non-delegated) click handler after creating the button.

在创建按钮后,或者绑定标准(非委派)单击处理程序。

Either way, within the click handler this will refer to the button in question, so this.value will give you its value.

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

#2


25  

Use

使用

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

to add the listener for the dynamically created button.

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

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

will give you the value of the button

会给你按钮的价值

#3


5  

Just create a button element with jQuery, and add the event handler when you create it :

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

小提琴

#4


3  

Question 1: Use .delegate on the div to bind a click handler to the button.

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

Question 2: Use $(this).val() or this.value (the latter would be faster) inside of the click handler. this will refer to the button.

问题2:在点击处理程序中使用$(this).val()或this.value(后者会更快)。这将参考按钮。

$("#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');

#1


68  

Use a delegated event handler bound to the container:

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

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

That is, bind to an element that exists at the moment that the JS runs (I'm assuming #pg_menu_content exists when the page loads), and supply a selector in the second parameter to .on(). When a click occurs on #pg_menu_content element jQuery checks whether it applied to a child of that element which matches the #btn_a selector.

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

Either that or bind a standard (non-delegated) click handler after creating the button.

在创建按钮后,或者绑定标准(非委派)单击处理程序。

Either way, within the click handler this will refer to the button in question, so this.value will give you its value.

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

#2


25  

Use

使用

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

to add the listener for the dynamically created button.

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

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

will give you the value of the button

会给你按钮的价值

#3


5  

Just create a button element with jQuery, and add the event handler when you create it :

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

小提琴

#4


3  

Question 1: Use .delegate on the div to bind a click handler to the button.

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

Question 2: Use $(this).val() or this.value (the latter would be faster) inside of the click handler. this will refer to the button.

问题2:在点击处理程序中使用$(this).val()或this.value(后者会更快)。这将参考按钮。

$("#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');