Dodawanie zdarzenia kliknięcia dla przycisku utworzonego dynamicznie za pomocą jQuery

Question

Jak dodać zdarzenie click button na przycisku, który został dodany dynamicznie przy użyciu jQuery?

Kod jQuery, która dodaje dynamiczne przyciski wewnątrz div pojemniku:

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

Pytanie 1: Jak mogę dodać zdarzenie click do powyższego przycisku? Próbowałem poniżej i nie wywołał

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

Pytanie 2: Jak mogę uzyskać wartość przycisku wewnątrz zdarzenia click? Na przykład chcę uzyskać wartość "Przycisk dynamiczny" w funkcji zdarzenia kliknięcia.

Czy możecie, proszę, pomóżcie mi w tej sprawie.

Answer 1

Użyj delegowanego obsługi zdarzenia związanego z pojemnikiem:

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

Oznacza to, że wiążą się z elementu, który istnieje w tej chwili, że JS biegnie (jestem zakładając #pg_menu_content istnieje Po załadowaniu strony), i dostarczyć selektor w drugim parametrze do .on(). Po kliknięciu elementu #pg_menu_content jQuery sprawdza, czy zastosowano go do elementu podrzędnego tego elementu, który pasuje do selektora #btn_a.

Można to powiązać ze standardową (nie delegowaną) obsługą kliknięcia po utworzeniu przycisku.

Tak czy inaczej, w ramach obsługi kliknięcia this będzie się odnosił do danego przycisku, więc this.value da ci jego wartość.

Answer 2

Zastosowanie

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

dodać słuchacza na dynamicznie utworzony przycisk.

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

daje wartość przycisku

Answer 3

wystarczy utworzyć element przycisk z jQuery i dodać obsługi zdarzeń podczas tworzenia go:

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

Pytanie 1: Użyj elementu .delegate na elemencie div, aby powiązać moduł obsługi kliknięcia z przyciskiem.

Pytanie 2: Użyj $(this).val() lub this.value (ten drugi byłby szybszy) wewnątrz obsługi kliknięcia. this będzie odnosić się do przycisku.