get the HTML content of clicked element jQuery

Question

I have the following 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

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

Answer 1

Clone the clicked element, wrap it in a <div>, and then ask for the HTML of that - 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 at https://stackoverflow.com/a/6509421/6782

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

Answer 2

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

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