如何动态添加标签内的标签，并点击访问它？

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），该事件不是动态创建的。