i have problem with click event. click to another element with event(click), doesn't count like click elsewhere. I want active one element or none.
demo: http://jsfiddle.net/WP4RH/
code:
$('span').click(function(){
var $this = $(this);
if($this.hasClass('active')){
$this.removeClass('active')}
else $this.addClass('active');
$('div').click(function(){
if (!$this.has(this).length) {
$this.removeClass('active');
}
});
return false;
});
Add this at the beginning of your span event handler:
$('.active').removeClass('active');
Demo
This is assuming that you want multiple clicks on the same span to retain active. If you don't want that, then let me know and I can modify the code.
For starters, You should move the div handler outside and then removeClass based on div element.
$('span').click(function(e) {
e.stopPropagation();
$(this).parent().find('span').removeClass('active');
$(this).toggleClass('active');
});
$('div').click(function() {
$(this).find('span').removeClass('active');
});
DEMO: http://jsfiddle.net/WP4RH/1/
Don't bind a click handler inside a click handler, just check if the target is the div or the span inside the click handler instead. Also, when adding the active class to this, just remove it on any sibling span :
$('span').on('click', function(){
$(this).toggleClass('active').siblings('span').removeClass('active');
});
$('div').on('click', function(e){
if (e.target == this) $('span').removeClass('active');
});
FIDDLE
If you want to keep the toggle-off functionality when the span itself has been clicked, then you can use the following. Also, note that you're binding an event handler each time a span is clicked.
http://jsfiddle.net/WP4RH/7/
$("span").click(function() {
$(this).siblings("span").removeClass("active"); // remove from other spans
$(this).toggleClass("active"); // toggle this span
return false;
});
$("div").click(function() {
$(this).find("span").removeClass("active"); // remove from all spans
});
Related
In a script I'm writing with JQuery I'm trying to add a click handler to a div, but ignoring clicks on the children a tags inside it.
You can see a JSFiddle of how I'm currently trying (and failing) to make it happen here: http://jsfiddle.net/q15s25Lx/1/
$(document).ready(function() {
$(document).on('click', '.post:not(a)', function(e) {
alert($(this).text());
});
});
<div class="post">This is some text in a div. Click me please.</div>
In my real page, the a tags all have their own click handlers, so I need to be able to listen for those concurrently.
So, ideally I'd like to use something like the :not() selector to ignore clicks on this particular handler.
Is something like this possible?
You'll need to add another handler that acts on the anchor and stops the event from propagating:
$(document).on('click', '.post a', function (e) {
e.stopPropagation();
e.preventDefault();
});
Without this, when you click the a the event bubbles up to the parent .post, and the handler fires on that anyway.
You need to stop event propagation to child elements using .stopPropagation():
$(document).on('click', '.post a', function(e) {
e.stopPropagation();
});
Working Demo
Just return false; in the end of event handler.
$(document).on('click', '.post', function (e) {
alert($(this).text());//will show entire text
});
$(document).on('click', '.post a', function (e) {
alert($(this).text());//will show 'text'
return false;
});
working fiddle: http://jsfiddle.net/q15s25Lx/2/
return false will server as both e.preventDefault() &
e.stopPropagation()
Try to stop the event from bubbling up the DOM tree using stopPropogation()
$(document).ready(function() {
$(document).on('click', '.post a', function(e) {
e.stopPropagation();
alert($(this).text());
});
});
Fiddle Demo
All of the other posts did not explain why your code failed. Your selector is saying : Find an element that has the class post and is not an anchor. It is NOT saying if a child was clicked and was an achor do not process.
Now there are two ways to solve it. One is to prevent the click from bubbling up from the anchors. You would add another listener on the anchors.
$(document).on('click', '.post a', function (evt) {
evt.stopPropagation(); //event will not travel up to the parent
});
$(document).on('click', '.post', function (evt) {
console.log("Click click");
});
Or the other option is not to add a second event, but check what was clicked.
$(document).on('click', '.post', function (evt) {
var target = $(evt.target); //get what was clicked on
if (target.is("a")) { //check to see if it is an anchor
return; // I am an anchor so I am exiting early
}
console.log("Click click");
});
Or jsut let jquery handle it all for you. return false
$(document).on('click', '.post:not(a)', function() {
alert($(this).text());
return false;
});
I'm trying to add a class on right-click of an element and then remove it when anything else on the page is clicked.
I'm using jQuery.
My function is this so far:
$(".classElement").live('mousedown', function(e) {
if( (e.which == 3) ) {
$(".classElement").addClass("active");
}
e.preventDefault();
}).live('contextmenu', function(e){
e.preventDefault();
});
However, this adds the "active" class to all ".classElement" in the doc, rather than the individual one being clicked. I want to only add the class to the element being clicked.
Also, how can I remove the class when anything else is clicked?
You can removClass active on click of body element, but for this you have to stop event propagation when you are clicking on current element.
$(document).on('mousedown','.classElement', function(e) {
e.preventDefault();
if( (e.which == 3) ) {
$(this).addClass("active");
}
e.stopPropagation();
}).on('contextmenu','.classElement', function(e){
e.preventDefault();
});
$(document.body).click(function(){
$(".classElement").removeClass("active");
});
You can use $(this) to target current clicked element, so you can do:
$(this).addClass("active");
instead of:
$(".classElement").addClass("active");
Also, since .live() was removed since version 1.9, you should use .on() instead.
to target specific element:
$(this).addClass("active");
and to remove it when anything else is clicked, add this:
$(window).one("click", function(){
$(this).removeClass("active");
});
This adds a one time only click event listener to the window.
Use this code
$(".classElement").live('contextmenu', function(e){
e.preventDefault();
if( (e.which == 3) ) {
$(this).addClass("active");
}
});
and then remove class on document click
$(document).click(function(){
$(".classElement").removeClass("active");
});
I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});
I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?
Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});
This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});
If I have a parent div that is positioned absolutely and then a child div that has a higher z-index and is positioned relatively, is there a way to have a click event register only if the parent div is clicked, but not the inside div?
Relevant jsFiddle
Updated fiddle with text input example
$(".parent").click(function(e) {
if (e.target == this) {
$(this).hide();
}
});
DEMO: http://jsfiddle.net/Bt5HA/4/
Access child elements and return false when they're clicked http://jsfiddle.net/Bt5HA/3/
Change to:
$('.child a').click(function(e) {
$(this).parent('.child').hide();
});
Try This
$('#child').click(function(event) {
event.stopPropagation();
alert('You clicked Child');
});
$('#parent').click(function() {
alert('You clicked on Parent');
});
You can check working here
http://jsfiddle.net/VnHGh/24/