jQuery capturing ID of a clicked object

Question

I'm attempting to retrieve the ID of the element I'm clicking on

$mainBox.on('click', '.menuBtn', function(event) {
    console.log(event.target.attr('id'))    
});

the element I'm clicking is loaded as part of an external html, this would be the line that is being clicked:

<li class="menuBtn" id="item03"><span class="styleClass1">03</span><span class="styleClass2">Menu Item</span></li>

how do I get item03? event.target.attr('id') doesn't do it

score 2 · Accepted Answer · answered Dec 10 '13 at 02:07

2

event.target is DOM element so you need to make it a jQuery Object to use .attr()

$mainBox.on('click', '.menuBtn', function(event) {
    console.log($(event.target).attr('id'))    
});

or directly use JavaScript

$mainBox.on('click', '.menuBtn', function(event) {
    console.log(event.target.id);
});

$mainBox.on('click', '.menuBtn', function(event) {
    console.log(this.id);
});

answered Dec 10 '13 at 02:07

@user3024007 Welocme Happy to help :) – Tushar Gupta - curioustushar Dec 10 '13 at 02:13
btw, is it read as string? If I pass it on to function to load some content that matches this ID, will this work? `$('#foo').load ('external.html' + [passed data from this.id])` where that id represents the element to grab in the newly loaded html? – user3024007 Dec 10 '13 at 02:18
@user3024007 `this.id` will output id `item03`.You have concatenate it with string example `'ID is '+this.id+' you got it'` – Tushar Gupta - curioustushar Dec 10 '13 at 02:21
wait, I'm not sure if I follow... Suppose I passed this.id to function `...function(target) { `$('#foo').load('external.html' '+target+')` ?? – user3024007 Dec 10 '13 at 02:32
@user3024007 Read [this](http://sraji.wordpress.com/2011/01/10/multiple-ways-to-concatenate-a-string-in-javascript/) and [this](http://www.w3resource.com/javascript/operators/string-operator.php) – Tushar Gupta - curioustushar Dec 10 '13 at 02:34
1

thanks so much. I got it now – user3024007 Dec 10 '13 at 02:42

1 Answers1