Добавление события клика для кнопки, созданной динамически с помощью jQuery

Как добавить событие нажатия кнопки на кнопку, добавленную динамически с помощью jQuery?

Код jQuery, который добавляет динамические кнопки внутри контейнера div:

$('#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: Как добавить событие click для указанной кнопки? Я попробовал ниже, и он не вызвал

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

Вопрос 2: Как я могу получить значение кнопки внутри события click? Например, я хочу получить значение "Динамическая кнопка" внутри функции события клика.

Можете ли вы, ребята, помочь мне в этом.

Ответы

Ответ 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 даст вам свое значение.

Ответ 2

Использование

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

чтобы добавить слушателя для динамически созданной кнопки.

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

даст вам значение кнопки

Ответ 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

Ответ 4

Вопрос 1: используйте .delegate в div, чтобы привязать обработчик кликов к кнопке.

Вопрос 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');