获取clicked元素jQuery的HTML内容

Question

我有以下HTML

<label class="editable" id="user_info_username">Hai world...</label>

现在点击功能我需要点击元素的内容。

我试过

$(".editable").live("click",function(){
alert($(this).html())  //returns Hai world...
});

但我需要HTML内容

所以<label class="editable" id="user_info_username">Hai world...</label>

Answer 1

克隆点击的元素，将其包装在<div>中，然后询问HTML的内容 - 例如：

var html = $('<div/>').append($(this).clone()).html();

http://jsfiddle.net/f88kj/

的工作演示

我之前也写过一个插件，可以在https://stackoverflow.com/a/6509421/6782

执行此操作

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);

Answer 2

如果我很清楚你需要类似jQuery的.outerHTML属性

http://forum.jquery.com/topic/jquery-outerhtml-for-jquery

Answer 3

您正在寻找的内容类似于outerHTML。不幸的是，Firefox目前不支持它，所以请在这里找一个解决方法：How do I do OuterHTML in firefox?。

Answer 4

也许您可以使用包装器，如下所述：

HTML：

<div class="YourHtmlContent">
<label class="editable" id="user_info_username">Hai world...</label>
</div>

和js：

$(".editable").live("click",function(){
alert($('.YourHtmlContent').html())
});

Answer 5

使用jQuery.clone（）的答案是最好的IMO，但我在这里添加它是另一种方式，可能对其他人有帮助。

你可以获得父div的任何html - 这是一个问题，因为可能还会有兄弟姐妹返回。

像这样：

alert($(this).parent().html()); //will return siblings too

http://jsfiddle.net/Qg9AL/