We Keep Coding

.on event not enabling click event

I have put together some simple code as an excercise and seem to be having a problem enabling a click event using .on('click'); method.
The .off event works fine but when i click the $('#bdReset').click(function (e) { it does not turn the click event on. I would be grateful if someone could point out my error or offer some advice as to how I can overcome this error. Many thanks
JS Version: jquery-1.11.1.min.js
Fiddle
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").off("click").addClass('disable');
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").on("click").removeClass('disable').css('cursor', 'pointer');
});
});

Try the sample code below
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").prop('disabled', true);
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").prop('disabled', false);
});
});

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.

Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});

Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

Javascript - How can I differentiate a click and a double click on one element

I am trying to add a click function that triggers when a button is clicked. I am also trying to figure out how to add a double click function onto the same element, that triggers a different event.
var click = false;
onEvent("image2", "click", function(event) {
click = true;
});
if (click === true) {
setTimeout(function() {
onEvent("image2", "click", function(event) {
setScreen("safeScreen");
console.log("double click");
});
}, 200);
} else {
onEvent("image2", "dblclick", function(event) {
setScreen("safeScreen");
console.log("click");
});
}
This code is completely wrong, but I don't know where to start/correct. What am I doing wrong?

You should replace click with dblclick
Also check this link

How to close own modal on outside click?

I have made modal window. It closes by clicking on X button.
But now I want to close it, if user click of modal outside area.
$("a[href='#modal']").click(function(e) {
e.preventDefault();
$("body").addClass("noscroll");
$(".modal").addClass("is-active");
$(".modal_overlay").addClass("is-active");
});
$(".modal .close").click(function(e) {
e.preventDefault();
if($(".modal").hasClass("is-active")) {
$("body").removeClass("noscroll");
$(".modal").removeClass("is-active");
$(".modal_overlay").removeClass("is-active");
}
});

Here's a solution:
function close(){
$("body").addClass("noscroll");
$(".modal").addClass("is-active");
$(".modal_overlay").addClass("is-active");
}
$("a[href='#modal']").click(function(e) {
e.preventDefault();
close();
});
$(".modal .close").click(function(e) {
e.preventDefault();
if($(".modal").hasClass("is-active")) {
close();
}
});
$(window).click(function(e) {
close();
return false;
});
$(".modal").click(function(){
return false; // prevents a click in dialog to close the modal
});
It just handles the click on the window to close the modal, while intercepting them in the modal to prevent them from hitting the previous event handler.

Close footer by clicking anywhere on the DOM

I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks

$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.

Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle

Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});