Get Id of <a> selector using jquery - javascript

<div>
<ul>
<li><a id="Tab1" href="">Tab1</a></li>
<li><a id="Tab2" href="">Tab2</a></li>
<li><a id="Tab3" href="">Tab3</a></li>
<li><a id="Tab4" href="">Tab4</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$("a").click(function() {
var IdName = $("a").attr('id');
alert(IdName);
});
});
</script>
When I click the hyperlink, it always shows id of the first hyperlink. Why ? How can I solve it ?

In an event handler, this is the element you want.
Change
var IdName = $("a").attr('id');
to
var IdName = this.id;
Note: it makes no sense to use $(this).attr('id'), this is slow and verbose for no reason, always use the direct this.id.

You can use $(this) inside the click event handler. $(this) inside event handler is the anchor that is clicked.
$("a").on('click', function() {
alert($(this).attr('id'));
// return false OR e.preventDefault to stop redirection
});

You are calling attr() on $('a') which will give you attribute of first matched element. Use $(this) to get current clicked anchor tag
$(document).ready(function(){
$("a").click(function(){
var IdName = $(this).attr('id');
alert(IdName);
});
});

Related

How to set $(this) as the clicked element

In the following code:
// submit an item
$(document).on("click", ".match-item", function(event) {
// how to set $(this) == $('.match-item') clicked?
});
I'm looking to retrieve $(this) as the clicked item and not the document itself. How would I do this?
This is more of clarification rather than answer.
this is already referring to the currently clicked element.
$(document).on("click", ".match-item", function(event) {
console.log($(this).attr('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Parent
<div class="match-item">----Click Me</div>
</div>
How about
$('.match-item').click(function() {
//your code with $(this) here
});
I am pretty sure $(this) will refer to the element with class match-item

Change title of fa-icon using jquery [duplicate]

In my JSP page I added some links:
<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>
It has a jQuery function registered for the click event:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick");
$('#gentab a').attr('href', '#datacollector');
});
It will add a class, tabclick to <a> which is inside <li> with id="gentab". It is working fine. Here is my code for the <li>:
<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab">General</li>
Now I have a jQuery click handler for these links
$("a.tabclick").click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
For the first link it is working fine. It is alerting the <li> id. But for the second <li>, where the class="tabclick" is been added by first jQuery is not working.
I tried $("a.tabclick").live("click", function(), but then the first link click event was also not working.
Since the class is added dynamically, you need to use event delegation to register the event handler
$(document).on('click', "a.tabclick", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
You should use the following:
$('#gentab').on('click', 'a.tabclick', function(event) {
event.preventDefault();
var liId = $(this).closest("li").attr("id");
alert(liId);
});
This will attach your event to any anchors within the #gentab element,
reducing the scope of having to check the whole document element tree and increasing efficiency.
.live() is deprecated.When you want to use for delegated elements then use .on() wiht the following syntax
$(document).on('click', "a.tabclick", function() {
This syntax will work for delegated events
.on()
Based on #Arun P Johny this is how you do it for an input:
<input type="button" class="btEdit" id="myButton1">
This is how I got it in jQuery:
$(document).on('click', "input.btEdit", function () {
var id = this.id;
console.log(id);
});
This will log on the console: myButton1.
As #Arun said you need to add the event dinamically, but in my case you don't need to call the parent first.
UPDATE
Though it would be better to say:
$(document).on('click', "input.btEdit", function () {
var id = $(this).id;
console.log(id);
});
Since this is JQuery's syntax, even though both will work.
on document ready event there is no a tag with class tabclick. so you have to bind click event dynamically when you are adding tabclick class. please this code:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick")
.click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
$('#gentab a').attr('href', '#datacollector');
});
Here is the another solution as well, the bind method.
$(document).bind('click', ".intro", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Cheers :)
I Know this is an old topic...but none of the above helped me.
And after searching a lot and trying everything...I came up with this.
First remove the click code out of the $(document).ready part and put it in a separate section.
then put your click code in an $(function(){......}); code.
Like this:
<script>
$(function(){
//your click code
$("a.tabclick").on('click',function() {
//do something
});
});
</script>

Unable to toggle the class in Jquery [duplicate]

In my JSP page I added some links:
<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>
It has a jQuery function registered for the click event:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick");
$('#gentab a').attr('href', '#datacollector');
});
It will add a class, tabclick to <a> which is inside <li> with id="gentab". It is working fine. Here is my code for the <li>:
<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab">General</li>
Now I have a jQuery click handler for these links
$("a.tabclick").click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
For the first link it is working fine. It is alerting the <li> id. But for the second <li>, where the class="tabclick" is been added by first jQuery is not working.
I tried $("a.tabclick").live("click", function(), but then the first link click event was also not working.
Since the class is added dynamically, you need to use event delegation to register the event handler
$(document).on('click', "a.tabclick", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
You should use the following:
$('#gentab').on('click', 'a.tabclick', function(event) {
event.preventDefault();
var liId = $(this).closest("li").attr("id");
alert(liId);
});
This will attach your event to any anchors within the #gentab element,
reducing the scope of having to check the whole document element tree and increasing efficiency.
.live() is deprecated.When you want to use for delegated elements then use .on() wiht the following syntax
$(document).on('click', "a.tabclick", function() {
This syntax will work for delegated events
.on()
Based on #Arun P Johny this is how you do it for an input:
<input type="button" class="btEdit" id="myButton1">
This is how I got it in jQuery:
$(document).on('click', "input.btEdit", function () {
var id = this.id;
console.log(id);
});
This will log on the console: myButton1.
As #Arun said you need to add the event dinamically, but in my case you don't need to call the parent first.
UPDATE
Though it would be better to say:
$(document).on('click', "input.btEdit", function () {
var id = $(this).id;
console.log(id);
});
Since this is JQuery's syntax, even though both will work.
on document ready event there is no a tag with class tabclick. so you have to bind click event dynamically when you are adding tabclick class. please this code:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick")
.click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
$('#gentab a').attr('href', '#datacollector');
});
Here is the another solution as well, the bind method.
$(document).bind('click', ".intro", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Cheers :)
I Know this is an old topic...but none of the above helped me.
And after searching a lot and trying everything...I came up with this.
First remove the click code out of the $(document).ready part and put it in a separate section.
then put your click code in an $(function(){......}); code.
Like this:
<script>
$(function(){
//your click code
$("a.tabclick").on('click',function() {
//do something
});
});
</script>

$(document).on('click', selector, function() ) combined with :not

I've got several list items, when I click on the item I want the browser to redirect to ".title > a" link (href). But I don't want any event on the "notThis" selector.
see the example
http://jsfiddle.net/VTGwV/29/
<div class="item">
<div class="title">
jsfiddle.net
</div>
<div> djføljdsaføljdsf a</div>
<div> djføljdsaføljdsf a</div>
<div> djføljdsaføljdsf a</div>
<div class="notThis">
link1
link2
</div>
​
script
​$(document).on('click', '.item', function(event) {
window.location.href = $(event.currentTarget).find('.title > a').attr('href');
});​
I've tried :not('.notThis') without any luck.
Changes
Thanks for all the answers, but I found another problem. If I have a event handler on the whole item , I can't manage to click on the link in "notThis" selector, because it returns only "false". Isn't there a way to use .not / :not combined with $(document).on('click', -------)
You can test whether the click event originated from within the .notThis element (or the element itself):​
$(document).on('click', '.item', function(event) {
if($(event.target).closest('.notThis').length > 0) {
return false; // if you want to ignore the click completely
// return; // else
}
window.location.href = $(event.currentTarget).find('.title > a').attr('href');
});​
I also think you can use this instead of event.currentTarget.
Your syntax is wrong, just use the selector like this:
Example
$("div.item > div:not(.notThis)").click(function(){
window.location.href = $(this).find('.title > a').attr('href');
});
http://jsfiddle.net/Lcg49/4/
var clickable = $('.item').find('div').not('.notThis');
$(clickable).on('click', function(event) {
alert($(this).parent().find('.title a').attr('href'));
});

Binding click function to all elements within an anchor tag with prototype

I have html like this:
<ol id="test-ol">
<li>
<a href="http://example.com">
<span class="myspan">test</span>
not in span
<span class="myspan">test2</span>
</a>
</li>
...
</ol>
and the following JavaScript (Prototype):
$$('#test-ol a').each(function(narrowByElement){
Event.observe($(narrowByElement),'click',onToolbarClick.bind(this));
});
onToolbarClick = function(event){
var href = Event.element(event).readAttribute('href');
console.log(href);
Event.stop(event);
}
Clicking on the non-span part within the anchor tag would log the right href, but clicking on the "test" part within the span would return null.
So how can I bind my click function to all the elements within my anchor tag?
Try this:
Event.on('test-ol', 'click', 'a', onToolbarClick);
.
onToolbarClick = function(event, element){
var href = element.readAttribute('href');
console.log(href);
event.stop();
}
For more details, check out the docs for Event.on, specifically the descriptions for the selector and callback parameters.
onToolbarClick = function(event){
var href = this.getAttribute('href');
console.log(href);
Event.stop(event);
}
For prototype 1.6.0 and higher.

Categories