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

Question

Как добавить событие нажатия кнопки на кнопке, которая была добавлена ​​динамически с помощью 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: Как я могу добавить событие щелчка для кнопки? Я пробовал ниже, и это не вызвало

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

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

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

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

FIDDLE

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