I have data which is loaded via ajax and I would like to disable a click event on li element which has a class active, the below is what I tried. can someone help me out?
$('body').on("click", 'li *:not(.active)', function (e) {
//do something
}); //this doesn't work
You are targeting all non-active descendants of list items.
Remove the universal selector
Remove the descendant combinator
Such:
'li:not(.active)'
If the active class is on the li then remove the space and * (which targets all descendant elements that do not have the active class)
$('body').on("click", 'li:not(.active)', function (e) {
//do something
}); //this doesn't work
Um, that code is not looking at an li element, thatmselector is looking for a child of an li element. Get rid of the space and * and it will check the li.
li:not(.active)
Related
I have set an "onmousedown" event handler for the body of my page. In this page there are some div elements, is it possible to ignore the clicks on these divs, and to just fire the onmousedown event handler of the body with the correct coordinates, as if the divs were not present?
If you want a click on a div to result in nothing, use this CSS declaration:
div {
pointer-events: none;
}
or use this to stop any event from firing by a click on a div:
$('div').click(function(e) {
e.stopPropagation();
});
Add a custom class to the div elements you want to ignore clicks (let's say, ignore-clicks):
div.ignore-clicks {
pointer-events: none;
}
Yes, add stopPropagation(); to your divs to stop the click event from bubbling.
$("div").click(function(e) {
e.stopPropagation();
});
Sample to avoid click on div
$("body :not(div)").click(function(){alert("Test")})
as u use jquery
$(document).ready(function() {
$('body').click(function(e) {
if (e.target == this) {
alert('Parent was clicked');
}
});
});
https://jsfiddle.net/1ox8akcx/1/
You can also use event.target to determine where the user has clicked. Just ad the following snippet inside your event-listener for the body:
if($(e.target).is('div')){
return false;
}
Demo
The .is() can of course be used with specific classed or other selectors.
Demo 2
Reference
.is()
Try this: http://jsfiddle.net/eaL53d62/1/
(function(){
$('#body').on('mousedown', ':not(.not-clickable)', function(e){
alert('clicked');
});
}());
Specifically, using the :not() selector will ignore specific elements
I have a Li element (dropdown) that gets an Active class when parent div (button) is clicked. When this element have this class I want to give another div the same class. When the li element (dropdown) is clicked again the active class is removed, I then want to remove the active class on the second div aswell.
What I got so far:
$('document').ready(function() {
if ($('li').hasClass('active')) {
$("#site-overlay").addClass("active");
}
});
This works a bit on the way in console- it gives my second div the correct class. It doesnt work live though, I guess I cant just call it on pageload? It also doesnt remove the class.
$('li').on('click', function(){
if($(this).hasClass('active')) {
$("#site-overlay").addClass("active");
} else {
$("#site-overlay").removeClass("active");
}
});
Your current example is not setting the active class on the LI elements, so nothing happens, but it should work something like this:
$(function () {
$('ul.megamenu > li').on('click', function () {
$("#site-overlay").toggleClass("active", $(this).hasClass('active'));
});
});
toggleClass can take a second boolean parameter that controls turning on/off the class based on a true/false value.
Note: I hacked the following JSFiddle just to show something working (the clicking just toggles the site-overlay state for now):
https://jsfiddle.net/TrueBlueAussie/doxdmxmL/16/
I have a follow up question to this: Add and remove a class on click using jQuery?
I'm able to add a class to a specific li element using this snipped by Jamie Taylor:
$('.team').on('click', 'li', function() {
$('.team li#member').removeClass('more');
$(this).addClass('more');
});
I'd like to remove the Class .more again, by clicking a toggle element inside the li-item.
My jQuery Snippet which doesn't work:
$('.toggle-x').click(function () {
$('.team li#member').removeClass('more');
})
Thanks for the help!
In your code, it will remove the class form only one element with id member. If you want to remove the class from all the li elements, use like this,
$('.team li.more').removeClass('more');
try this
$(".innerLiContent").click(function(){
$(this).parentsUntil( "li" ).removeClass('more');
});
Your problem is because when you click on an element X inside the <li /> the element fires the click event, and if you don't use event.stopPropagation() the <li /> will also fire the click event and the class will be added again.
Try this:
$('.toggle-x').click(function (e) {
$('.team li#member').removeClass('more');
e.stopPropagation();
})
It should work if that's your problem.
So I have a parent div with different elements inside. Right now I have it set up so when that parent div is clicked, it applies a "selected" css attribute (just highlights it). However, there is an anchor tag inside this div and I don't want the div to highlight if the anchor is clicked.
My code to highlight the div
$(document).on("click",".playlist-row",function() {
var selected = $(this);
highlight(selected);
});
Ideally, I want it to behave like this: (just pseudo code)
$(document).on("click",".playlist-row",function() {
var selected = $(this);
if ($(".childElement) is not the part clicked) {
selectSongInPlaylist(selected);
}
});
Any elegant ways to get something like this to work?
You could use stopPropogation() as in http://api.jquery.com/event.stopPropagation/ on the child elements like $('.childElement').click(function(e){
e.stopPropagation();
}); to prevent the click event propagating to the parent element. You could also check the event.target property as described here http://api.jquery.com/event.target/
you need to prevent the click event bubbling up to the container
capture the event and use event.stopPropagation
$(document).on('click', "a", function(event){
event.stopPropagation();
});
I will assume that I understood your question, so here's what I would probably do:
$(document).on("click", ".playlist-row", function(e) {
if (!$(e.currentTarget).is("a")) {
selectSongInPlaylist($(this));
}
}
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');
});