I have the following list items with each anchor tags.So I need to get each clicked list item’s anchor tag href value.Here tested solutions and possible errors of the discussions beyond the expectation.
If you clicked on the Google.com, you want to get that clicked li tag’s anchor tag url.
You can get that clicked href values as following methods using simple jquery.
Mehtod-1
$('li.menuItem').click(function(e){
var clickedURL = $('a', this).attr('href');
return false; // you can use e.preventDefault(); instead of this.Same effect
});
Mehtod-2 – Using find selector
$('li.menuItem').click(function(e){
var clickedURL = $(this).find("a").attr('href');
e.preventDefault(); // same to return false;
});
Mehtod-3 – using children selector
$('li.menuItem').click(function(e){
var clickedURL = $(this).children('a').attr('href');
return false;
});
Mehtod-4
$('li.menuItem').click(function(e){
var clickedURL = $('.prodcat-line>a').attr('href');
return false;
});
Note:
return false from within a jQuery event handler is effectively the same as calling both e.preventDefault() and e.stopPropagation() on the passed jQuery Event objects.
e.preventDefault() will prevent the default event from occurring.
e.stopPropagation() will prevent the event from bubbling up/propagating the DOM.
return false will do both.
Note that this behavior differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up/propagating.
This is showing …..
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}