如何在div中动态添加标签并在点击时访问它？

Question

我的div结构应该是这样的：

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

要创建div我使用此：

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

我需要在上面h6中附加带有文字的div标记。如何才能做到这一点？另外，如果点击h6，如何访问div代码中的文字？

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

要点击h6访问div的文字，请尝试以下操作：

$("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），这不是动态的创建