获取已单击的jQuery元素的HTML内容

I have the following HTML

我有下面的HTML。

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

now on click function i need the content of the clicked element .

现在在单击函数时，我需要单击元素的内容。

i tried

我试着

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

But i need the HTML content

但是我需要HTML内容

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

所以Hai world…

5 个解决方案

#1

Clone the clicked element, wrap it in a <div>, and then ask for the HTML of that - something like:

克隆被单击的元素，将其封装到

中，然后请求它的HTML—类似于:

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

Working demo at http://jsfiddle.net/f88kj/

工作演示http://jsfiddle.net/f88kj/

I also previously wrote a plugin that does this at https://*.com/a/6509421/6782

我之前还写过一个插件，它可以在https://*.com/a/6509421/6782上实现这一点

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

#2

if I well understood you need something like .outerHTML property for jQuery

如果我很清楚的话，您需要一些类似jQuery .outerHTML属性的东西

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

#3

What you're looking for is something like outerHTML. Unfortunately, Firefox does not currently support it, so look for a work-around here: How do I do OuterHTML in firefox?.

你要找的是像outerHTML这样的东西。不幸的是，Firefox目前不支持它，所以在这里寻找一个解决方案:我如何在Firefox中使用OuterHTML ?

#4

Maybe you could use a wrapper, like described below:

也许你可以使用一个包装，如下所述:

html:

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

and js:

js:

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

#5

The answer using jQuery.clone() is best IMO, but I'm adding this here as it's another way and might be helpful to others.

使用jQuery.clone()的答案在我看来是最好的，但是我在这里添加这个，因为这是另一种方法，可能对其他人有帮助。

You could get the html of whatever the parent div is - this is an issue because there might be siblings which would also be returned.

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

like so:

像这样:

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

http://jsfiddle.net/Qg9AL/

#1