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);
});
});

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

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');
}
});

Javascript pop up hide when click outside and show if links are clicked

need help.. this is my fiddle.
it shows a pop up on first load..
the problem is when i click on the pop up it hides..how do i prevent this.. also when i click on a link it should show the pop up again and when i click outside of the pop up it will hide..
Script
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$("#popupBoxClose").click( function () {
alert('hello');
unloadPopupBox();
});
$("#popup_box").click( function () {
e.stopPropagation();
});
$('#global_wrapper').click( function() {
unloadPopupBox();
});
$('.secure').click( function() {
loadPopupBox();
});
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').show();
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}

You aren't passing the event to the click handler, try updating this event handler, note the e passed as a parameter to the function:
$("#popup_box").click( function (e) {
e.stopPropagation();
});

Load() seems to lose scope after it's been evoked

I have a button that fades in some html file, and then a back button that returns the user to initial view. However this only works once. They are unable to click the button again for a more detailed view.
$('.support').click(function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$('.back').click(function () {
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
});

If .back element is generated dynamically, you should delegate the event:
$('.main-view-wrapper').on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})
$(document).on('click', '.support', function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$(document).on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})

After you've clicked both buttons, you've faded out both .main-view and .return-main, but you never fade them back in. So nothing will happen on the next click. Do you need to fade them in on click of the opposite button?