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

Hide menu when ESC clicked using Javascript

I am currently customising an off-screen navigation menu.
I'd like to use Javascript to close the menu when ESC is clicked or if the user clicks outside of the menu's focus. How do I achieve this?
Here's my example: http://jsfiddle.net/q55xtcw4/
I've tried using this code:
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest( elem ).length === 0 ) {
$( elem ).hide();
}
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( elem ).hide();
}
});
but no success.
Many thanks for any guidance here.

Dirty but useful solution for you change your JS code into this
$(".nav-trigger").click(function(e){e.stopPropagation()})
$( document ).on( 'click', function ( e ) {
$( ".nav-trigger" ).prop("checked",false);
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( ".nav-trigger" ).prop("checked",false);
}
});
Here is the working fiddle
here is the updated fiddle

Here is a working JSFiddle: http://jsfiddle.net/e9wa0093/2/
Basically, elem wasn't defined in your example. Same with show() and hide() methods. The changes I made to your code merely updates the checked property of the hidden checkbox used to control the position (i.e., visibility) of the menu.
Edit:
Corrected JSFiddle, as commented below: http://jsfiddle.net/e9wa0093/4/

Use This :-
$(document).keyup(function(e) {
if (e.keyCode == 13) $('.save').click(); // enter
if (e.keyCode == 27) $('.cancel').click(); // esc
});
FOR more info click here

elem is not something on your DOM
$( elem ).hide();
you should change it into your class or id like:
$('#menu').hide();

Try using something like this:
<script>
$(document).ready(function(){
$(document).keypress(function (evt) {
//Determine where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode == 27) { //Enter key's keycode
//do what ever you want
$('#someid').hide();
}
});
});
</script>

The solution you are using is based on a CSS hack using a hidden checkbox.
You can control the status of the menu by toggling the value of this checkbox, rather than using javascript to hide the menu. Hiding the menu using javascript will actually break the CSS hack, as the CSS depends on the menu being visible but just offset from the side of the screen.
So replace:
$( elem ).hide();
With:
$("#nav-trigger").click();

The below code will collapse the menu on pressing escape
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#nav-trigger").removeAttr("checked") }
});

hide div if clicked outside of it [duplicate]

This question already has answers here:
Close/hide an element when clicking outside of it (but not inside)
(3 answers)
Closed 8 years ago.
I’m having a little trouble with this JQuery function.
Basically, I have a div, that when clicked, shows another Div. It’s set to a toggle, actually, so it toggles on/off when you click.
I want to have it where if you click on anywhere outside of the opened div (that appears after you click on the first div), the div that was opened is closed.
$("#idSelect").click(function() {
$("#idDiv").toggle();
});

EDIT : A better approach here:
How to create a custom modal popup - and how to close it clicking outside of it
jsBin demo
$( "#idSelect" ).click(function( e ) {
e.stopPropagation();
$("#idDiv").toggle();
});
$( "#idDiv" ).on('click',function( e ) {
e.stopPropagation();
});
$( document ).on('click', function( e ) {
if( e.target.id != 'idDiv' ){
$( "#idDiv" ).hide();
}
});

Hope this helps:
$(document).click(function() {
if($(window.event.target).attr('id') != 'idSelect')
$("#idDiv").hide();
});

$(document).on("click",function(e) {
if ($(e.target).is("#idDiv, #idDiv *"))
$("#idDiv").show();
else
$("#idDiv").hide();
});

jQuery-outside-events plugin adds support for the following events
clickoutside, dblclickoutside, focusoutside, bluroutside,
mousemoveoutside, mousedownoutside, mouseupoutside, mouseoveroutside,
mouseoutoutside, keydownoutside, keypressoutside, keyupoutside,
changeoutside, selectoutside, submitoutside.
Applied to your case you can do
$("#idDiv").on("clickoutside", function( ) {
$("#idDiv").hide();
});
$("#idSelect").on("click", function( e ) {
$("#idDiv").toggle();
e.stopPropagation();
});
Demo here

Toggle element's class by ID

I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original here).
Here is the original code:
<script type="text/javascript">
function changeClass() {
document.getElementById("MyElement").className += " MyClass";
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
}
</script>
And here is my code:
<script type="text/javascript">
function changeClass() {
if (document.getElementByID("arrow").className == "arrowdown") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
}
elseif(document.getElementByID("arrow").className == "arrowup") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
}
}
</script>

$('#arrow').toggleClass('arrowup arrowdown');

Why not simply use jQuery toggleClass instead along with a id selector?
$('#arrow').toggleClass('arrowup');
$('#arrow').toggleClass('arrowdown');
And save yourself debugging and a few lines of code!

Check this FIDDLE
Its far easier with JQuery..
$(function() {
var i = 0;
$('div').on('click', function() {
i++;
if( i % 2 == 0){
$(this).addClass('arrowup').removeClass('arrowdown');
}
else{
$(this).addClass('arrowdown').removeClass('arrowup');
}
});
});​

just use jquery addClass() and removeClass() or even better the toggleClass inside your click event
<div id="elemID" class="class1">
</div>
function changeClass()
{
$("#elemID").toggleClass("class1");
$("#elemID").toggleClass("class2");
}
REF's
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
http://api.jquery.com/toggleClass/
Cheers

I faced something similar to this today. In my code for each feature the user would express his opinion by pressing thumbs up or thumbs down. The selected thumb icon would have a brighter color, so when the user would click the thumbs up icon, the thumbs up icon would turn green and the thumbs down icon (if it were green) would turn black.
I solved it using jQuery:
$(document).ready(function () {
$('#vote-yes-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('true');
$('#1vote-yes-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-no-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
$('#vote-no-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('false');
$('#1vote-no-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-yes-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
});

How to bind a click event to the document so that it fires only when no object is clicked

I would like an event to fire whenever something other than a DOM element is clicked, and a separate event when an image is clicked.
Right now I have:
$( document ).click( function() { /*do whatev*/ } );
and in another place:
$( "img" ).click( function( e ) {
e.stopPropagation();
/*do whatev*/
} );
it does not work. both events are fired. any other ideas?

Simple and concise:
jQuery(document).click(function(event) {
if (jQuery(event.target).is('img'))
{
alert('img');
}
else
{
// Reject event
return false;
}
});
If the user clicks on an img element 'img' is alerted, otherwise the click event is stopped.

something like this:
$('*').click(function(ev) {
ev.stopPropagation();
if ($(this).is('img')) alert('img');
else if($(this).is('div')) alert('div');
else alert('something else');
});
http://www.jsfiddle.net/U2Szn/ ?

This should work, but just img isn't enough. It could be triggering from the img container. I think you'd need a selector like $('p,div,img,a,input,textarea,span,ul,ol,dl,li,dd,dt,table,tr,td') and any other tag you can think of to pull it off. This might have performance issues.

If you want an event to fire when the html and/or body is clicked or an img is clicked something like this should work: Live Example
$(document).click(function(e) {
if($(e.target).is('html')){
alert('this is the html element');
}else if($(e.target).is('body')){
alert('this is the body element');
}
});
$("img").click(function(e) {
e.stopPropagation();
alert('img')
});​