綁定對某些html的操作，然後附加

Question

讓我們假設我們有一些HTML和附加操作。

var html = $('<a href="#">click me</a>'); 
html.find('a').bind('click', function(e) { 
    alert('You clicked me!'); 
}); 

現在，我們要添加這一塊的HTML（與綁定操作）一些<div id="destination"></div>。

$('#destination').append(html); 

這可能嗎？ （請參見jsfidder）

我需要此功能來爲模式窗口的內容綁定一些操作，然後將此內容附加到模式窗口的html包裝器，然後調用Modal.show()。所以

這是好的做法還是不建議做？

Answer 1

這個概念應該可以正常工作。你的小提琴的問題是使用find，它看起來後代的元素，但你的a元素不是後代。改爲使用filter：

var html = $('<a href="#">click me</a>'); 
html.filter('a').bind('click', function(e) { 
    alert('You clicked me!'); 
}); 

這是updated fiddle。

或者，你可以使用on（如果你使用jQuery 1.7+）或delegate到事件處理程序附加到#destination：

$("#destination").on("click", "a", function() { 
    alert('You clicked me!'); 
}); 

如果你這樣做，你可能想給a元素一些標識符，否則事件處理程序將執行#destination的任何a後代。

編輯（基於評論）

正如在評論中指出的@RoryMcCrossan，在這種情況下，你可以真正消除filter完全。這是因爲jQuery對象中只有一個元素。但是，如果你已經縮短了代碼的問題而言，要小心，因爲在這種情況下刪除filter將事件處理程序綁定到所有的元素：

var html = $('<a href="#">click me</a>'); 
html.bind('click', function(e) { 
    alert('You clicked me!'); //Bound to all elements in `html` 
}); 

Answer 2

據我所知$('<a href="#">click me</a>');是應該返回創建的元素。

你或許應該刪除find('a')調用，就像下面的示例中：

var html = $('<a href="#">click me</a>'); 
html.bind('click', function(e) { 
    alert('You clicked me!'); 
}); 

Answer 3

你檢查的.find()的文檔。

獲取匹配的 元素中的每個元素的後代，由選擇器，jQuery對象或元素過濾。

沒有你的html元素數組的後代。你可以使用過濾器（）在DOM找到，但在這裏，你可以直接使用each()爲：

var html = $('<a href="#">click me</a>'); 
html.each(function(index){ 

    $(this).bind('click', function(e) { 
    alert('You clicked me!'); 
}); 
}); 
$('#destination').append(html); //click not works :(

檢查更新jsFiddle。

Answer 4

附加後綁定事件（html變爲實際的DOM對象）。

var html = $('<a href="#">click me</a>'); 

$('#destination').append(html).find('a').click(function(e) { 
    alert('You clicked me!'); 
}); 

或結合爲HTML

var html = $('<a href="#">click me</a>'); 
html.click(function(e) { 
    alert('You clicked me!'); 
}); 
$('#destination').append(html);