Develop Reference

Nested menu stop triggering not directly clicked <li>s

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

jQuery handling of click event on checkbox nested inside <li> and <a> elements while leaving parent <ul> open

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();

JQuery change class when a link is clicked

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

how to disable a li tag using JavaScript

I am using the following HTML on my page:
<ul id="tabnav">
<li id="tab_a" class="tab1">Tab a</li>
<li id="tab_b" class="tab2">Tab b</li>
<li id="tab_c" class="tab3">Tab c</li>
</ul>
What I am trying to do is make it so that you can't click on the 3rd tab using javascript then I want to be able to click on the 3rd tab at a later time.
So I have tried using the following JavaScript in a JavaScript function:
document.getElementById("tab_c").style.enabled = false;
however it didn't seem to work.
I was hoping that it would make it disabled so you can't click on it.
Am I doing something wrong?

//css
.disabled{
pointer-events:none;
opacity:0.4;
}
// jqvery
$("li a").addClass('disabled');
// remove .disabled when you are done

You can add an onclick handler to the link that returns false.
document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​
The childNodes[0] just selects the first child which in this case is the <a>
E.g. http://jsfiddle.net/zYSeF/

Using the jQuery library, you can do something like this.
$('a').on('click', function() {
return !$(this).attr('disabled');
});
To toggle being disabled, you can simply do this.
$('#tab_c a').attr('disabled', true); //add
$('#tab_c a').removeAttr('disabled'); //remove
jQuery

How to select the currently clicked anchor element in jquery.localscroll?

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'));
});