How To Get Id Of An Element With Javascript/Jquery &Ndash; Techie Delight

$(document).ready(function() $("a").click(function() var test = caller.id; alert(thử nghiệm.val()); ););

Except of course that the var demo should contain the id "aaa", if the event is fired from the first khung, & "bbb", if the event is fired from the second size.

Bạn đang xem: How to get id of an element with javascript/jquery – techie delight

In jQuery sự kiện.target always refers to the element that triggered the event, where sự kiện is the parameter passed to the function. http://api.jquery.com/category/events/event-object/

$(document).ready(function() $("a").click(function(event) alert(sự kiện.target.id); ););chú ý also that this will also work, but that it is not a jQuery object, so if you wish lớn use a jQuery function on it then you must refer to lớn it as $(this), e.g.:

$(document).ready(function() $("a").click(function(event) // this.appkết thúc wouldn"t work $(this).append(" Clicked"); ););
Share
Improve this answer
Follow
edited May 15 "19 at 5:24

Jaông xã Bashford
38.1k1010 gold badges3636 silver badges6464 bronze badges
answered Sep 7 "08 at 19:02

samjudsonsamjudson
53k77 gold badges5555 silver badges6666 bronze badges
14
| Show 9 more comments
180
For reference, try this! It works!

jQuery("classNameofDiv").click(function() var contentPanelId = jQuery(this).attr("id"); alert(contentPanelId););
Share
Improve this answer
Follow
edited Jul 2 "12 at 3:03

Peter Mortensen
27.7k2121 gold badges9494 silver badges123123 bronze badges
answered Sep 2 "10 at 8:01
GemmaGemma
1,80111 gold badge1111 silver badges22 bronze badges
4
Add a comment |
104
Though it is mentioned in other posts, I wanted khổng lồ spell this out:

$(sự kiện.target).id is undefined

$(event.target)<0>.id gives the id attribute.

sự kiện.target.id also gives the id attribute.

this.id gives the id attribute.

and

$(this).id is undefined.

The differences, of course, is between jQuery objects and DOM objects. "id" is a DOM property so you have to be on the DOM element object khổng lồ use it.

Xem thêm: Top 12 Cung Hoàng Đạo Hợp Nhau Nhất Trong Tình Yêu, Những Cung Hoàng Đạo Hợp Nhau

(It tripped me up, so it probably tripped up someone else)

Share
Improve sầu this answer
Follow
edited May 9 "18 at 15:45
dun
3955 bronze badges
answered Nov 6 "12 at 13:38
dschdsch
1,04111 gold badge77 silver badges22 bronze badges
3
Add a comment |
93
For all events, not limited khổng lồ just jQuery you can use

var target = event.target || sự kiện.srcElement;var id = target.idWhere event.target fails it falls baông xã on sự kiện.srcElement for IE.To clarify the above sầu code does not require jQuery but also works with jQuery.

Share
Improve sầu this answer
Follow
edited Feb 8 "16 at 15:12
Alexander Elgin
5,80644 gold badges3232 silver badges4747 bronze badges
answered Jul 19 "12 at 14:23
AllyAlly
4,19555 gold badges3131 silver badges4040 bronze badges
4
Add a comment |
59
You can use (this) to lớn reference the object that fired the function.

"this" is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the clichồng, each, bind, etc. methods.

Share
Improve sầu this answer
Follow
edited Aug 30 "13 at 8:19
sr01853
5,23711 gold badge1515 silver badges3636 bronze badges
answered Sep 7 "08 at 8:12
EspoEspo
39.2k20đôi mươi gold badges126126 silver badges156156 bronze badges
1
Add a comment |
29
I generate a table dynamically out a database, receive the data in JSON & put it into lớn a table. Every table row got a chất lượng ID, which is needed for further actions, so, if the DOM is altered you need a different approach:

$("table").delegate("tr", "click", function() var id=$(this).attr("id"); alert("ID:"+id); );
Share
Improve sầu this answer
Follow
edited Feb 8 "16 at 15:13
Alexander Elgin
5,80644 gold badges3232 silver badges4747 bronze badges
answered Sep 12 "11 at 14:14
SMutSMut
29133 silver badges22 bronze badges
2
Add a phản hồi |
19
Element which fired event we have in event property

event.currentTargetWe get DOM node object on which was mix event handler.

Most nested node which started bubbling process we have in

event.targetEvent object is always first attribute of sự kiện handler, example:

document.querySelector("someSelector").addEventListener(function(event) console.log(sự kiện.target); console.log(event.currentTarget););More about sự kiện delegation You can read in http://maciejsikora.com/standard-events-vs-event-delegation/

Share
Improve this answer
Follow
answered Oct 14 "16 at 13:04
Maciej SikoraMaciej Sikora
15.3k33 gold badges3737 silver badges3737 bronze badges
Add a comment |
12
The source element as a jQuery object should be obtained via

var $el = $(event.target);This gets you the source of the clichồng, rather than the element that the click function was assigned too. Can be useful when the cliông chồng event is on a parent objectEG.a clichồng sự kiện on a table row, & you need the cell that was clicked

$("tr").click(function(event) var $td = $(event.target););
Share
Improve sầu this answer
Follow
edited Dec 15 "14 at 13:51
Cerbrus
59.2k1515 gold badges112112 silver badges129129 bronze badges
answered Mar 22 "12 at 15:41
MorvaelMorvael
2,98122 gold badges2929 silver badges5151 bronze badges
0
Add a phản hồi |
8
this works with most types of elements:

$("selector").on("click",function(e) log(e.currentTarget.id); );
Share
Improve this answer
Follow
edited Sep 13 "19 at 22:48
answered Oct 18 "18 at 19:28
CrisCris
2,0671818 silver badges1818 bronze badges
Add a phản hồi |
7
You can try khổng lồ use:

$("*").live("click", function() console.log(this.id); return false;);
Share
Improve sầu this answer
Follow
answered Nov 3 "12 at 17:40
DariusDarius
9911 silver badge33 bronze badges
Add a phản hồi |
6
In the case of delegated event handlers, where you might have sầu something lượt thích this:

Item 1 Item 2 Item 3 Item 4 Item 5 and your JS code like so:

$(document).ready(function() $("ul").on("cliông xã li", function(event) var $target = $(event.target), itemId = $target.data("id"); //do something with itemId ););You"ll more than likely find that itemId is undefined, as the nội dung of the LI is wrapped in a , which means the will probably be the sự kiện target. You can get around this with a small check, like so:

$(document).ready(function() $("ul").on("clichồng li", function(event) var $target = $(event.target).is("li") ? $(event.target) : $(sự kiện.target).closest("li"), itemId = $target.data("id"); //vày something with itemId ););Or, if you prefer to maximize readability (& also avoid unnecessary repetition of jQuery wrapping calls):

$(document).ready(function() $("ul").on("click li", function(event) var $target = $(event.target), itemId; $target = $target.is("li") ? $target : $target.closest("li"); itemId = $target.data("id"); //vày something with itemId ););When using sự kiện delegation, the .is() method is invaluable for verifying that your sự kiện target (ahy vọng other things) is actually what you need it khổng lồ be. Use .closest(selector) to lớn tìm kiếm up the DOM tree, và use .find(selector) (generally coupled with .first(), as in .find(selector).first()) to search down it. You don"t need to lớn use .first() when using .closest(), as it only returns the first matching ancestor element, while .find() returns all matching descendants.