Get HTML content of jQuery click element

Question

I have the following HTML

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

now on the 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 HTML content

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

Answer 1

Clone a clicked element, wrap it in a <div> , and then request the HTML code - something like:

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

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

I also previously wrote a plugin that does this on fooobar.com/questions/1387359 / ...

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

Answer 2

If I understand well, you need something like .outerHTML property for jQuery

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

Answer 3

What you are looking for is similar to outerHTML . Unfortunately, Firefox does not currently support it, so search here: How to make OuterHTML in firefox? .

Answer 4

Perhaps you could use a wrapper as described below:

HTML:

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

and js:

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

Answer 5

The answer using jQuery.clone () is the best IMO, but I am adding this here as it is different and may be useful to others.

You can get the html of any parent div - this is a problem because there may be brothers and sisters who will also be returned.

So:

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

http://jsfiddle.net/Qg9AL/