image swap not working

Brad Bansner
Brad Bansner used Ask the Experts™
on
I have a bunch of images like this:

<img class="gr_mwc_dir" src="art/gr_mwc_dirclosed.png" width="9" height="9" border="0" />

All of my Javascript is attached, although I'm only concerned about the last part of it for this problem. Where I have $('.gr_mwc_dir').click that appears to not be working. I even put an alert in it, that function just isn't getting called at all when I click the image.

I must be doing something stupid, because this seems like it should be very simple! Thank you for looking!
<script type="text/javascript">

	$(function(){
		$('#gr_mwc_editworkoutsicons1').click(function(){
			alert('cardio');
		});
	});

	$(function(){
		$('#gr_mwc_editworkoutsicons2').click(function(){
			alert('strength');
		});
	});

	$(function(){
		$('#gr_mwc_editworkoutsicons3').click(function(){
			alert('flex');
		});
	});

	$(function(){
		$('#gr_mwc_editworkoutsicons4').click(function(){
			alert('balance');
		});
	});

	$(function(){
		$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day=5%2F16%2F2011', function(){
			$('#panelleft').fadeIn(400);
			$('#detailscreen').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel2.asp?cur_day=5%2F16%2F2011');
		});
		$('#gr_mwc_arrowleft').click(function(){
			if ($('#displayscreens').offset().top==149) {
				$('#displayscreens').animate({top: '+=36px'}, 200);
				$('#displayscreens').animate({top: '-=36px'}, 200);
			} else {
				$('#displayscreens').animate({top: '+=414px'}, 800);
			}
		});
		$('#gr_mwc_arrowright').click(function(){
			if ($('#displayscreens').offset().top==-2335) {
				$('#displayscreens').animate({top: '-=36px'}, 200);
				$('#displayscreens').animate({top: '+=36px'}, 200);
			} else {
				$('#displayscreens').animate({top: '-=414px'}, 800);
			}
		});
		$("#gr_mwc_monthhead2").click(function(){
			$("#gr_mwc_monthhead2").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead2.png");
			$("#gr_mwc_monthhead3").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead3b.png");
			$("#detailscreen").fadeOut(400);
		});
		$("#gr_mwc_monthhead3").click(function(){
			$("#gr_mwc_monthhead2").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead2b.png");
			$("#gr_mwc_monthhead3").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead3.png");
			$("#detailscreen").fadeIn(400);
		});
		$('.dayblock').click(function(){
			$('.dayblockhl').removeClass('dayblockhl');
			$('.gr_mwc_monthblockarrowhl').removeClass('gr_mwc_monthblockarrowhl');
			$(this).addClass('dayblockhl');
			$(this).children('.gr_mwc_monthblockarrow').addClass('gr_mwc_monthblockarrowhl');
			$('#panelleft').fadeOut(200);
			$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day='+$(this).attr('id'), function(){
				$('#panelleft').fadeIn(400);
			});
		});
		$('.gr_mwc_dir').click(function(){
			if ($(this).attr('src')="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
			} else {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
			}
		});
	});
</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

there is an "=" missing in this line:

if ($(this).attr('src')="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
                  
it should read

if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
                  
Brad BansnerWeb Developer

Author

Commented:
You are correct, thank you. However, it seems the function isn't triggering at all. I'm not even getting past the click event to make it to that "if" statement.
hmm... are your images created at runtime? In that case, you need to use jQuerys live-function
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

another thought:

When reproducing your script on my computer, it didn't work in the firstplace. The click method wasn't triggered, just as you said. It turned out that i misspelled the classname of my image. But i'm sure you will have checked spelling more than a hundred times :-)
Brad BansnerWeb Developer

Author

Commented:
Ah, you are right. The images are created as a result of an AJAX (.load) command. That could be the problem. But I am waiting for all the content to load before clicking. Even if that is the case, would the script not "see" the images?

I'm not familiar with live-function, though.
Brad BansnerWeb Developer

Author

Commented:
I moved the script to the page that is AJAX loaded, now it works. Thanks!
No, sadly your script can't see your images before they are created. jQuery.live() can. The purpose of this function is exactly to bind events to elements before they exist. (see http://api.jquery.com/live/)

$('.gr_mwc_dir').live('click', function(){
			if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
			} else {
				$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
			}
		});

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial