I want to get the handle of the currently clicked link in jquery. Suppose, I have a bunch of li a elements:
HTML
<ul id="navigation" class="main_menu">
<li>Home</li>
<li>Story</li>
<li>Mantra</li>
<li>Showcase</li>
<li>Experience Us</li>
</ul>
jquery
$(document).ready(function() {
$("#navigation").localScroll({
hash: false,
onAfter: function(e, anchor, $target) {
// some magic code here, to get the anchor element which was clicked
// how do I use the 'e', 'anchor' and '$target' parameter to get the anchor?
}
}
});
If you could just alert() the anchor text or href, I'll be on my way...
Please note: I don't want to set hash: true for some reason.
You should just be able to add another click() event to the a elements. Is there a reason it needs to be done inside the localScroll()?
$('#navigation a').click(function() {
alert($(this).attr('href'));
});
Or if you don't want the default behavior of clicking the a element, use the following:
$('#navigation a').click(function(event) {
event.preventDefault();
alert($(this).attr('href'));
});
Related
I have built an expandable, nested menu in <ul> <li> <ul> <li> style in HTML. Both, the upper and lower <li>s have an onCLick attribute. when clicking on the lower (nested) li, the upper li should not trigger onClick or at least submit to the handler, that it was activated indirectly.
How do I achieve this?
I think this will help you:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
e.stopPropagation();
});
});
If it dont: Send me a message
This seems like a simple issue but it is frustrating me. I want to be able to click multiple items in a dropdown list that contains checkboxes without collapsing the list. I've tried a variety of event handlers on the ul, li, and a elements with no luck. These include e.preventDefault(), e.stopPropogation(), and preventing the closing of the ul through the 'hide.bs.dropdown' event as per this answer.
My list items:
<li class="serviceListItem">
<a class="serviceListItemLink">
<input class="checkService" type="checkbox" value="">
</a>
</li>
and my current set of event handlers. I've tried most combinations of these.
$('#serviceDropdown').on('hide.bs.dropdown', function() {
return false;
});
$('.serviceListItemLink').click(function(e) {
console.log('you clicked a service');
e.stopPropogation();
e.preventDefault();
});
$('.serviceListItem').click(function(e) {
e.stopPropogation();
e.preventDefault();
});
I should add my UL has the #servicesDropdown ID. Thanks for all your help in advance SO.
Is that the code you have tried? In that case, you have misspelled "propagation".
It should be:
e.stopPropagation();
...and not:
e.stopPropogation();
I'm new to JQuery, I know this question is already answered in other posts but please help me on this,
How can i change the class of <li> tag if a link <a> is clicked?
<li class="link" id="home" >
Home
</li>
<li class="link" id="flt" >
FLT
</li>
This is what i have tried so far:
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
Please explain me the answer, other posts that is similar to mine doesn't have that much detail so i really don't understand how they do that?
When you click on the element, the actual click target is the a element whose default action is to navigate to the resource specified in the href property.
In this case you are registering the click event in the li event, this handler is getting triggered because of event bubbling where an event happening in a descendant element will get bubbled upto the document root.
So the solution here is to prevent the default action of the click event(in this case the navigation of the a element) by calling the .preventDefault() on the event.
var $lis = $('li').click(function(e) {
$lis.filter(".active").removeClass("active");
$(this).addClass('active');
e.preventDefault()
});
Use the following script. http://jsfiddle.net/czG8h/
$('.link a').click(function() {
$("li.active").removeClass("active");
$(this).closest('li').addClass('active');
});
If you want to persist the active style across the page, then following code will do the trick for you:
$(document).ready(function() {
var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");
///// Apply active class to selected page link
$('.link a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).closest('li').addClass('active');
});
});
Use .closest to get to parent li and add the class active then use siblings to find other li and remove the class active, and use e.preventDefault() to prevent changing page.
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});
DEMO
I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
I am trying to find some child a elements within a ul parent. But, I need to only find the first a. Here is what I am using
$('div.item a').click(function() {
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});
HTML:
<div class="item"><a id="main5830" href="http://www.mysite.com">Test</a></div>
<ul class="subItems">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
I would like test 1's a element to get the class of selected.
For some reason, this is not selecting the first a within in the UL, or ANYTHING in the UL element. Have I done something wrong here?
It does work, just need to use return false; (or event.preventDefault();) at the end of the click event handler to prevent the anchor default click behaviour.
$('div.item a').click(function() {
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
return false;
});
or
$('div.item a').click(function(e) {
e.preventDefault();
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});
Here's a Working Demo showing it working