Jquery .live() function with "load" event.

[mikesta707]

Hello. So i have a bunch of thumbnails, and using Jquery, I binded a click event (using click() method) to them which changes the thumbnails to the actual large image. This works perfectly. I also bind the "load" event to these images that does something based on the width of the image. This also works.

 

However, I also have some functionality on this page which hides certain divs, and reshows them. This works, but because I do this, I also use the live() method to dynamically bind the click event to the thumbnails whenever they are shown again (otherwise, when you hide and show said div, the click event doesn't work). This works perfectly, but when I try to dynamically bind the "load" event to the images, it doesn't work at all. The event doesn't even seem to fire (I tested with some strategically placed alerts)

 

The code goes as follows:

 

This is the code that works. It binds the click and load event

$('img[class="thumbnail"]').each( function( i ) {
		//alert($(this).html());

		that = $(this);
		$(this).attr("id", "ext-image-expandable-" + i)
		$('#ext-image-expandable-'+i).click(function(e) {
			//alert("clicked");//
			mouseX = e.pageX;
			mouseY = e.pageY
			if ($(this).attr("src").indexOf('&thumb=1') != -1){
				$(this).attr("src", $(this).attr("src").replace('&thumb=1',''));
				widthIMG = parseInt($(this).width())
				//alert(widthIMG);
				$(this).attr("style", "display:none");
				//alert($(this).width());
				$(this).fadeIn(1000);
			}//end if
			else {
				//alert("big");
				$(this).attr("style", "display:none");
				$(this).attr("src", $(this).attr("src") + '&thumb=1')

				$(this).fadeIn(1000);
			}//end else
			//alert("end click");
			return false;

		});//end .click
		$('#ext-image-expandable-'+i).load( function() {
			var obj = '<div class="ext-image-popup ext-remove" id="ext-big-img-popup" style="padding:10px;background-color:#F1E7C8; border: 2px black solid;z-index:10; position:absolute; top:' + mouseY + 'px; left: ' + mouseX + 'px;"><span style="float:left"><a href="#" id="closeWindow">X</a>  Image too large, expanded into window: <a href="'+that.attr("src")+'" target="_blank">Click here to open in new tab</a> </span><span style="float:right"> <a href="#" id="closeWindow">X</a></span>';
			var obj2 = "</div>";
			var imgWidth = $(this).width()
			//alert(imgWidth)
			if (imgWidth > 850){
			//	alert("too big");
				toappend = obj + '<img src="' + $(this).attr('src') + '" />'+obj2;
				//alert(e2.pageY);
				$('body').append(toappend)
				$(this).attr("src", $(this).attr("src") + '&thumb=1')
				$(this).fadeIn(1000);
			}//end if
		});
	});//end .each

 

Now below, the first function works fine (the click event) but the load doesn't work.

 

$('img[id^="ext-image-expandable-"]').live("click",function(e) {
			//alert("clicked");
			mouseX = e.pageX;
			mouseY = e.pageY
			if ($(this).attr("src").indexOf('&thumb=1') != -1){
				$(this).attr("src", $(this).attr("src").replace('&thumb=1',''));
				widthIMG = parseInt($(this).width())
				//alert(widthIMG);
				$(this).attr("style", "display:none");
				//alert($(this).width());
				$(this).fadeIn(1000);
			}//end if
			else {
				//alert("big");
				$(this).attr("style", "display:none");
				$(this).attr("src", $(this).attr("src") + '&thumb=1')

				$(this).fadeIn(1000);
			}//end else
			return false;
		});//end .live

		//load function
		$('img[id^="ext-image-expandable-"]').live("load", function() {
			alert("live load");
			var obj = '<div class="ext-image-popup ext-remove" id="ext-big-img-popup" style="padding:10px;background-color:#F1E7C8; border: 2px black solid;z-index:10; position:absolute; top:' + mouseY + 'px; left: ' + mouseX + 'px;"><span style="float:left"><a href="#" id="closeWindow">X</a>  Image too large, expanded into window: <a href="'+$(this).attr("src")+'" target="_blank">Click here to open in new tab</a> </span><span style="float:right"> <a href="#" id="closeWindow">X</a></span>';
			var obj2 = "</div>";
			var imgWidth = $(this).width()
			//alert(imgWidth)
			if (imgWidth > 850){
			//	alert("too big");
				toappend = obj + '<img src="' + $(this).attr('src') + '" />'+obj2;
				$('body').append(toappend)
				$(this).attr("src", $(this).attr("src") + '&thumb=1')
				$(this).fadeIn(1000);
			}//end if
		});//end live

 

I'm wondering of binding to the load event dynamically is even possible. I don't see why this wouldn't work. Anyone have any ideas? This is really stumping me.

 

Thanks in advance for any replies

[mikesta707]

I fixed the problem. I ended up simply calling the binded load function at the end of the live("click") event