How do I discover the DOM element that fired the event and behave accordingly

Question

I am trying to have multiple <a> tags (or any other tag) that I want bound to the same handler. I want the handler to discover which <a> tag was clicked and behave accordingly.

Example:

<a class="menu">Item1<a> <a class="menu">Item2<a> <a class="menu">Item3<a> $(".menu").click(function(){ //...Find out which a was clicked... ($(a .menu).html()=='Item1) }

What is the best way to go about doing this? I want this to behave in a way similar to the VirtualHosts section of Apache. Is it even possible to do this?

Community · Accepted Answer · 2017-05-23 11:49:02Z

3

Use jQuery $(this) :

$(".menu").click(function(){ $(this).html('Item1'); }

here is difference with jQuery: What's the difference between '$(this)' and 'this'?

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jan 30, 2013 at 21:47

Barlas Apaydin

7,35511 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fenton · Accepted Answer · 2013-01-30 21:47:44Z

The this keyword will be the element that triggered the event:

$(".menu").click(function(){ var clickedItem = this; alert(clickedItem.innerHTML); }

You can wrap that in a jQuery object if you like:

$(".menu").click(function(){ var clickedItem = $(this); if (clickedItem.text() === 'Item1') { alert('It was item 1'); } }

Did you mean to type clickedItem.text() or since you're only using it once: $(this).text()?

Collectives™ on Stack Overflow

How do I discover the DOM element that fired the event and behave accordingly

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related