I have a click event as
$(document).on('click', '#btn1', function(e){
alert('clicked');
e.stopPropagation();
e.stopImmediatePropagation();
return false;
alert('clicked again');
});
However, the clicked again is always showing.
Even after the return false; the click event is executing again.
How can i ensure a 1 time execution.
Use one() instead
$(document).one('click', '#btn1', function(e){
alert('clicked');
});
one documentation
Related
On first click my button click function works, but upon clicking again it refreshes the page click the unbind isn't recognized. I need to prevent any default click event as well as disable the button after click.
Save this Property
$(".red-btn2").click(function(event){
event.preventDefault();
$(this).unbind('click');
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
If you need the rest of the handler to run only once, but preventDefault() always, you can separate them into multiple handlers.
Then, one of them can be removed after its first use (using jQuery's .one() will cover that for you), still leaving the preventDefault() in use:
$('.red-btn2')
.click(function (event) {
event.preventDefault();
})
.one('click', function () {
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
As you have it, the event.preventDefault() is being removed as well by .unbind('click'), so no functions are left on the element to call it for the 2nd click.
When you unbind the handler, the button will function as normal on any subsequent click, and initiate a navigation. So you better really set the disabled property:
$(".red-btn2").click(function(event){
event.preventDefault();
if ($(this).prop('disabled')) return; // <---
$(this).prop('disabled', true); // <----
$(this).css({
'background-color':'#666666',
'text-align':'center'
});
$(this).text("Added to Favorites");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Save this Property
Note that event.preventDefault() actually works. It was only on the second click you had issues, because the link was still clickable, but your function was detached from it, so you had no control over that second click.
I have very annoying problem in my code.
When I change a checkbox state, the click event of it parent fires as well.
I've tried different methods to solve this problem like:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false
Unfortunately no one works for be (probably it's not related to "event propagation" issue). How can I make ('.sortable').click not to be fired on checkbox change?
HTML
<div class="sortable">
<span>Hello all!</span><br />
<label>Click on me<input type="checkbox" checked="checked" /></label>
</div>
jQuery
$(function(){
$('.sortable input[type=checkbox]').change(function(event){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
alert('checkbox changed');
});
$('.sortable').click(function(){
alert('sortable clicked');
});
});
You can find the code on: Demo
As you have bind click event to parent div, it is firing that also. You can check the 'target element if not checkbox' condition in parent click event handle like below
$('.sortable').click(function(event){
if(event.target.type!="checkbox")
console.log('sortable clicked');
});
Demo
coz You're Stopping propagation of .change() event and handling .click() event
Just Try changing:
$('.sortable input[type=checkbox]').change(function(event){ ... });
to:
$('.sortable input[type=checkbox]').click(function(event){ ... });
Hope it helps!
Here is a working example: http://fiddle.jshell.net/vjKGv/
I have done some research on jsfiddle
$(function(){
$('.sortable').click(function(e){
e.preventDefault();
console.log('sortable clicked');
});
$('.sortable input[type=checkbox]').click(function(event){
//event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
console.log('checkbox changed');
});
});
Let's say I got a simple click event for a HTML div.
If I click on the div it should trigger a fadeToggle.
In that div I got another div with another trigger.
On that click event it should do something but instead of doing the event it triggers the first event.
How do I prevent event 1 from triggering if I want event2 to trigger?
Event1 should trigger only if I don't press the clickevent on the second event everything else should trigger as usual.
Thanks for your time
HTML
<div id="1">
Event 1
<div id="2">
<div id="3">
but here is something as well event2
</div>
</div>
</div>
JavaScript
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function() {
$(this).css("background-color", "blue");
});
Fiddle: http://jsfiddle.net/VLcxJ/
$("#3").click(function(e) {
e.stopPropagation();
$(this).css("background-color", "blue");
});
After that, clicks on #3 won't reach #2 or #1
Use event.stopPropagation(); :
$("#e3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
See it working here : http://jsfiddle.net/bYn22/
Note from jQuery API (I couldn't explain it better) : event.stopPropagation() > Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
And note that your IDs can't begin with a number :)
$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
Added Fiddle: http://jsfiddle.net/VLcxJ/1/
Here is the solution
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
http://jsfiddle.net/tR7h9/3/
I'm tryin to make a div 'active' by clicking on it using jquery. But inside the div, there is a checkbox. I want the div to become active whenever i click anywher inside the div except the checkbox. I have done that, but the checkbox is now not responsding to click events (ie it's not getting checked/unchecked when i click on it).
http://jsfiddle.net/U7VmV/3/
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
return false;
});
Use event.stoppropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
}).find('label').click(function (e) {
e.stopPropagation();
});
Fiddle Demo
You have to prevent the propagation of the event, when you return false it prevents the event propagation but it will also prevents the default action of the click event that is checking/unchecking the checkbox.
So instead or returning false call stopPropagation() in the event object
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
e.stopPropagation()
});
Demo: Fiddle
Another way to do it is to check clicked event target:
var $cVideo = $('.c-video').on('click', function(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'LABEL') {
$cVideo.removeClass('active');
$(this).addClass('active');
}
});
http://jsfiddle.net/U7VmV/4/
So I want to get the button .notification to make .notificaiton-dropdown appear, and clicking outside of this element would close it. This works.
However, when I go to click on the element, it causes it to close. I want the current functionality, but not when clicking on the element itself so I can interact with it.
$(document).ready( function(){
$('.notification').click( function(event){
event.stopPropagation();
$('.notification-dropdown').toggle();
});
$(document).click( function(){
$('.notification-dropdown').hide();
});
});
I hope that's enough information. Thanks as always.
you need to stop the event propagation from notification-dropdown also
$(document).ready( function(){
$('.notification-dropdown').click( function(event){
event.stopPropagation();
});
$('.notification').click( function(event){
event.stopPropagation();
$('.notification-dropdown').toggle();
});
$(document).click( function(){
$('.notification-dropdown').hide();
});
});
I'd say:
$(document).click( function(e){
if($(e.target).closest('.notification-dropdown').length) return;
$('.notification-dropdown').hide();
});