通過jQuery的

Question

好的屬性動態按鈕，我可以生成一個按鈕的形式

var temp = "<button type=\"button\" class=\"dynBtn\" id=\"anID\">Here!</button>"; 
$('#myDiv').append(temp).click(function(){ 
    window.alert("Hello! My id is " + this.id); 
}); 

的代碼，然後在運行時，這不是真正的工作，因爲我得到的答案爲ID爲「myDiv 」。在另一方面，我還試圖用這樣的：

$('#myDiv').append(temp).click(dynButtonClicked(this)); 

其中dynButtonClicked作爲

function dynButtonClicked (aButton) { 
    window.alert("Hey, my id is " + aButton.id);  
}; 

但是，這樣一來，當加載頁面時點擊按鈕單獨定義的， id是'undefined'，而且，無論我點擊多少次按鈕，我都不會收到其他警報（除了我在加載頁面時獲得的警告外）。那麼，我該如何做到這一點？

我想最好我想給一個名稱爲類是在

$(document).ready(...) 

功能點擊任何這些的時候來處理它們在某處運行時生成，然後將所有按鈕的。但請，請繼續並告訴我你的想法。事實上，以後通過交互，我可能想刪除按鈕或禁用它們。所以，我正在尋找強大的東西。預先感謝您的時間。

Answer 1

這裏是如何做到這一點的jQuery的方式：

var $button = $('<button/>', { 
    type: 'button', 
    'class': 'dynBtn', 
    id: 'anID', 
    text: 'Here!', 
    click: function() { 
    window.alert('Hello! My id is '+ this.id); 
    } 
}); 

$button.appendTo('#myDiv'); 

Answer 2

這是因爲.append()不返回附加的元素，你可以在這種情況下使用.appendTo()：

$(temp).appendTo('#myDiv').on('click', function() { 
    window.alert("Hello! My id is " + this.id); 
}); 

如果要添加許多元素的DOM，這將是更好地使用事件委託來代替。

$('#myDiv').on('click', '.appendedElement', fn); 

Answer 3

上使用（），這樣做：

$(document).ready(function(){ 
    //in here you put the event for all elements with dynBtn class 
    $(document).on("click",".dynBtn",function(){dynButtonClicked();}); 
}); 

function dynButtonClicked (aButton) { 
    window.alert("Hey, my id is " + aButton.id);  
}; 

//and append the button anytime you want 
var temp = "<button type=\"button\" class=\"dynBtn\" id=\"anID\">Here!</button>"; 
$('#myDiv').append(temp);