We Keep Coding

jquery swap image on element click not functioning

I am trying to swap an image on click with jquery. I have got it to work with the click being bound to the image class. However, if I try and wrap the function and bind the event to a button or anchor, it will not swap the images. Here is the jquery:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
$(this).find(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
});
</script>
This worked:
jQuery(document).ready(function( $ ) {
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
Any help is greatly appreciated.

I don't think there's any need to delegate the event listeners so I've removed them. Simply add the click event to the image and then you can manually 'trigger' a click on it when the .test-toggle is clicked. E.G:
$(function() {
//add on click event
$(".img-swap").on('click', function() {
if (this.src.indexOf("_off")>0) {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
});
//add remote trigger
$(".test_toggle").on('click', function(){
$(".img-swap").trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

Thats because unlike like img.
a or button doesn't have a src attribute.
So when you bind the event to a button or anchor, this.src in your second instance of the code will be invalid.

I would delete this line:
$(this).find(".img-swap").live('click', function() {
What is it's purpose? You can swap this image right after the first click, right?
Also, make sure that .img-swap is inside the tag with class test_toggle.
You are using:
$(this).find(".img-swap")
find() searches only in children of selected element.
If it's not nested use
$(".img-swap")
instead of:
$(this).find(".img-swap")

I have re-written the js, but not tested. Can I nest clicks?
$(".test_toggle").click(function(){
$.find(".img-swap").click(function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});

jQuery hide element when click in datepicker

I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.

Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});

you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});

In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design

Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});

How to combine Hover, Out, Click event together

var bar = $('.div_layer_Class');
$('a.second_line').click(function() {
$(this).unbind('mouseout');
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
bar.css('display','none');
});
now the issue with 'onBodyclick' when i click anywhere on body again i want to invoke mouseoutevent something like this
$('body').click(function() {
bar.css('display','none');
event.preventDefault();
});
when I do this it overlaps $('a.second_line').click(function() event. any idea how I can Achieve this.
http://jsfiddle.net/qGJH4/56/

In addition to e.stopPropagation(),
you can do 2 things:
make a variable to reference the mouseout event handler so you can re-bind it whenever the user clicks elsewhere to the body.
or
A variable to store to whether a.second_line is focused or not. Something like
var focused = false;
You code now will be:
var bar = $('.div_layer_Class');
var focused = false;
$('a.second_line').click(function(e) {
focused = true;
e.stopPropagation();
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
if (!focused)
bar.css('display','none');
});
$(document).click(function(e){
bar.css('display','none');
focused = false;
});

Example here
Try changing your code to this
var bar = $('.div_layer_Class');
$('a.second_line').click(function(e) {
bar.addClass('on');
e.stopPropagation();
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
if(!bar.hasClass('on'))
bar.css('display','none');
});
$(document).on('click',function(){
bar.removeClass('on');
bar.css('display','none');
//return false;
});
Two lines to look at, first, the e in function(e)
$('a.second_line').click(function(e) {
and the stop e.stopPropagation();
That basically stops any parent handlers being notified. Read here

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>

$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});

Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);

If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);