Display an element's code while clicking on its part

Question

I wrote code that shows the whole document's HTML code in a pop-up message:

<label>Hai world...</label>
<p>Test</p>

$(document).click(function(event) {
    var text = $(event.target).parent().html();
    alert(text);
});

How can I narrow down my code to show me only the specific HTML code of the part which is clicked on, and not the whole document's HTML code?

Side note: start using [`console.log()`](http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it) instead of alert. — Dom, Nov 14 '13 at 17:29
Thank's A. Wolff but whene i clicked on it message box shows code of element,whole of document and something else — AP4MH, Nov 14 '13 at 17:37
@AP4MH: Yep, that’s probably going to be bubbling. Try what VickyGonsalves wrote, but with `e.target`, not `this`. — Ry-, Nov 14 '13 at 17:44
You're misusing `label`. Labels are used with form inputs, and help aid accessibility. This will be confusing to anyone accessing the site with a screen reader. — Matthew Johnson, Nov 15 '13 at 01:41

John S · Answer 1 · 2013-11-14T17:55:40.963

1

This should work:

$(document).click(function(event) {
    var text = event.target.outerHTML;
    alert(text);
});

edited Nov 14 '13 at 17:55

answered Nov 14 '13 at 17:47

John S

Vicky Gonsalves · Answer 2 · 2013-11-15T01:39:17.183

0

document.addEventListener('click', function() {
    alert(event.target.outerHTML);
}, false);

Try this without jQuery

edited Nov 15 '13 at 01:39

answered Nov 14 '13 at 17:33

Vicky Gonsalves

2

Wouldn’t be `this` – `e.target` rather, with the event argument. – Ry- Nov 14 '13 at 17:36

2 Answers2