爲使用jQuery動態創建的按鈕添加點擊事件

如何在使用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： 我怎樣才能增加一個點擊事件上面這個按鈕？我試過下面，也沒有引發

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

問題2： 我怎樣才能獲得的點擊事件裏面的按鈕的價值？例如，我想在click事件函數中獲取'Dynamic Button'值。

你們能幫我解決這個問題嗎？

來源

2013-11-27 Malaiselvan

要麼在將元素追加後綁定事件，要麼將其委託給始終存在於DOM中的父項。 – PSL

此視頻幫助我 - https://www.youtube.com/watch？v = unk-U_LQWuA – Prem

使用綁定到容器委派事件處理程序：

$('#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會給你它的價值。

來源

2013-11-27 21:20:28 nnnnnn

看起來，如果元素已經存在，這將使處理程序觸發兩次。 –

@JihoKang - 不，不。爲什麼呢？只有一個處理程序。 – nnnnnn

使用

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

添加的偵聽器動態創建的按鈕。

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

會給你的按鈕的值

來源

2013-11-27 21:20:56

這隻適用於我 – Mani

只需創建與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

來源

2013-11-27 21:21:08 adeneo

問題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');

來源

2013-11-27 21:25:31 Mike

爲使用jQuery動態創建的按鈕添加點擊事件

回答

相關問題