Develop Reference

How to prevent onclick event on a div while clicking on body click?

I would like to do functionality for body,html elements while clicking on anywhere on document and also there is a div tag which is onclick event will be there. Both are clashing each other how to prevent while clicking on that div. Tried both event stop propagation and event prevent defaul
for example:
jd is nothing but jquery
$jd = jQuery
The below event should only triggered particular div. but t his event clashing with body onclick.
$jd('.menu-left a').click(function(){
$jd('.menu-left a').removeClass('active');
if($jd(this).hasClass('add_item_team')) self.team.create();
if($jd(this).hasClass('add_item_qrcode')) self.qrcode.open();
$jd(this).addClass('active');
jQuery("#text-lock").trigger("click");
});
jQuery(document).on('click','body',function(event){
/*console.log("adsfasddfs");
var finding_span;
finding_span = $jd(".design-area").find('.content-inner span.drag-item');
if(event.target.id == "dg-left"){
return false;
}else{
if(finding_span.length>0){
console.log("cameeeee");
design.item.unselect();
}
}*/
var finding_span;
finding_span = $jd(".design-area").find('.content-inner span.drag-item');
if(finding_span.length>0){
design.item.unselect();
}

jQuery(document).on('click','body',function(event){
event.preventDefault();
event.stopPropagation();
var finding_span;
finding_span = $jd(".design-area").find('.content-inner span.drag-item');
if(finding_span.length>0){
design.item.unselect();
}
Hope this may help you

Try the following
$jd(function(){
event.preventDefault();
event.stopPropagation();
$jd('.menu-left a').click(function(){
$jd('.menu-left a').removeClass('active');
if($jd(this).hasClass('add_item_team')) self.team.create();
if($jd(this).hasClass('add_item_qrcode')) self.qrcode.open();
$jd(this).addClass('active');
jQuery("#text-lock").trigger("click");
});
});

jQuery(document).on('click','html,body,#main',function(event){
event.preventDefault();
event.stopPropagation();
if(event.target.id=="text-lock"){
return false;
}
var finding_span;
finding_span = $jd(".design-area").find('.content-inner span.drag-item');
if(finding_span.length>0){
design.item.unselect();
jQuery(".add_item_text").css({'background-color':'#f6f6f6','color':'#333'});
}

Why current opened div doesn't close

I have one question about jQuery close system. I have created this DEMO from codepen.io
In this demo you can see there are two div (red and blue). When you click the red div then the .CRtW11 will be an active. But after you click the blue div the .CRtW11 stayed on there; it needs to be inactive. What is the problem there, can anyone tell me ?
JS
// FOR cR
$("body").on("click", ".cR", function(event) {
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
This function wont work for the red and blue div as their click events are stopped in their respective click functions. So the simple solution will be to add the remove class function in the opposite click functions. i.e.
// FOR cR
$("body").on("click", ".cR", function(event) {
$(".BRc").removeClass("BRc-active");
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

Javascript disable onclick event until it's event is finished

How can I temporary disable onclick event until the event is finished?
So far that's all I've come up with:
<script>
function foStuff(a){
//no modifications here to be done, just some code going on
}
$(document).ready(function(){
$("#btn").click(function(){
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
obj.prop('onclick',action);
});
});
});
</script>
<div id="btn" onclick="doStuff(500)">
</div>
EDIT:
I've tried it this way: but it doesn't unblock the click event
$("#btn").click(function(){
var obj = $(this);
obj.off('click');
$.when( doStuff(500) ).then( function(){
obj.on('click'); // it actually comes here, but click event is being unset
} );
});
<script>
$(document).ready(function(){});
</script>
<div id="btn">
</div>

Well, you can create a variable that tells your function to ignore it while it's true;
var isIgnore = false;
$("#btn").click(function(){
if(isIgnore)
return;
isIgnore = true;
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){
obj.prop('onclick',action);
isIgnore = false;
});
});
This code is not tested but I think this will work.

Simply reference the handler, and detach it before performing your action, then at the end attach it again ...
$(document).ready(function () {
var handler = function () {
var obj = $(this);
obj.off('click');
whenDoStuffFinishes.(function () {
obj.click(handler);
});
};
$("#btn").click(handler);
});

use pointerEvents.try this:
$("#btn").click(function(){
document.getElementById('btn').style.pointerEvents = 'none';
whenDoStuffFinishes.(function(){
document.getElementById('id').style.pointerEvents = 'auto';
});
});

Using a combination of bind and unbind
https://api.jquery.com/bind/
https://api.jquery.com/unbind/

Turn the event off once it is triggered and reattach it at the end of the callback.
jQuery( '#selector' ).on( 'click', function voodoo( event ) {
jQuery( event.target ).off( event.type );
// Do voodoo...
jQuery( event.target ).on( event.type, voodoo );
});
Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.
jQuery( '#selector' ).on( 'click', function( event ) {
event.stopImmediatePropagation();
});

hiding element on blur, when it is shown

I don't understand why my function is not working.
It is showing up the login form, but when I blur (click somewhere else than the form) it is not hiding.
here is my buggy code:
$(document).on('click', '#login-btn', function(){
var $form = $("#login");
$form.show("slow" );
$("#login").on('blur', function (){
$form.hide("slow");
});
});

You probably do not want this blur to be handled only when click event gets fired.
Move the blur event out of the click event
var $form = $("#login");
$(document).on('click', '#login-btn', function(){
$form.show("slow" );
$('#loginUsername').focus();
});
$form.on('focusout', function (){
$form.hide("slow");
});

You can do this:
var $form = $("#login");
$(document).on('click', '#login-btn', function () {
$form.show("slow");
}).on('blur', '#login', function () {
$form.hide("slow");
});

click function does not work when changed to live or on

I have a function that uses ajax to load content throughout one of my sites.
This works all good but at some parts because new content is brought in that has more links I need to make the click function a live click function, but when I do the ajax stops working and it just changes the page as normal ( without ajax )
here is my code
function ajaxLoads(){
var $btn = $('a.ajax-btn');
var $container = $('#load');
var siteTitle = document.title;
//var $artistBG = $('#artist-viewport img');
$btn.click(function(e){
console.log();
e.preventDefault();
$btn.removeClass('selected');
//$artistBG.removeClass('top');
var sourceTarget = $(this).data('page'),
slideWidth = $container.width(),
$this = $(this),
$background = $this.data('background'),
pageUrl=$this.attr('href'),
pageTitle = $this.html();
//$changeTo = $("#artist-viewport img[data-background='"+ $background +"']");
$this.addClass('selected');
//$changeTo.addClass('top');
$container.animate({'right':-slideWidth}, 300, 'easeInExpo');
$container.load(pageUrl+" "+sourceTarget, function(){
subNav();
$("html, body").animate({ scrollTop: 0 }, 500, 'easeInExpo', function(){
$container.animate({'right':0}, 300, 'easeInExpo');
});
var pageContent = $(this).html();
window.history.pushState({"html":pageContent, "pageTitle": pageTitle},"", pageUrl);
//document.title=pageTitle+" :: "+siteTitle;
}); // end load function
}); // end click function
window.onpopstate = function(e){
if(e.state){
$container.css('opacity', 0).html(e.state.html).fadeTo('fast', 1);
document.title=e.state.pageTitle+" :: "+siteTitle;
}
};
}
I have tried changing the $btn.click(function(e) to $btn.live('click', function(e) and to $btn.on('click', function(e)

Add .on on document.
$(document).on('click','a.ajax-btn',function(){ });

try on
$('#load').on('click', '.ajax-btn', function(){
...
});
live is deprecated in jquery 1.8 and removed in 1.9.. so use on()

Give your button a css class and use this
$(document).on("click",".yourcssclass",function(e){});
This will work since by default, most events bubble up from the original event target to the document element.Though this degrades performance, a click event happens infrequently and you might use this as a fix to your problem.Then when you have time ,try to see why using delegates is not working by carefully looking on your page cycle.