如何動態添加標籤內的標籤，並點擊訪問它？

Question

我div結構應該是這樣的：

<div id="dashboard"> 
    <img id="pic1" src="...png" /> 
    <h6>....</h6>  
</div> 

要創建div我用這個：

$('<div>', { 
    'id': 'dashboard' 
}).appendTo('body'); 

我需要一個h6標籤文本追加到上述div。如何才能做到這一點？當點擊div時，如何訪問h6標籤中的文本？

$('#dashboard div').hover(function() { 
    alert($(this).children().eq(2) ?? ); 
}; 

Answer 1

要添加h6元素，試試這個：

var $div = $('<div>', { 
    'id':'dashboard' 
}).appendTo('body'); 

$("<h6></h6>").text("Foo").appendTo($div); 

要訪問的div的點擊h6的文字，試試這個：

$("body").delegate("#dashboard", "click", function() { 
    var text = $("h6", this).text(); 
    alert(text); 
}); 

，它假定你是使用jQuery 1.6或更低版本。如果您在使用jQuery 1.7+，你可以使用on()：

$("body").on("click", "#dashboard", function() { 
    var text = $("h6", this).text(); 
    alert(text); 
}); 

Example fiddle

而且，我在這裏使用$("body")作爲一個例子 - 你應該使用一個選擇是最接近你的元素將該事件附加到（在這種情況下爲#dashboard），該事件不是動態創建的。