[AnimusImmodicus]

Hello everyone. Today is the first time I have used JQuery and Javascript for that matter so please excuse my ignorance. Right now I am trying to dynamically add elements to a DOM. Below is the relevant code.

$(function() 
{
	
	$(".iSmall").click(function ()
	{
		var thesrc = $(this).attr("src");
		$(this).before("<img src=\"" + thesrc + "\" class=\"iBig\" />");
		
	});
	
	$(".iBig").click(function ()
	{
		alert("Clicked the new one");
		//determining if I selected the object
	});
	
});

Now, adding the image seems to work fine. However, when I try to select it and remove it, it doesn't seem to select it. What I really don't seem to understand then is why I am not able to select by classname for the image after I have added it to the DOM with before().

All help is greatly appreciated.

[girasquid]

The reason this is happening is because you're binding to the click event on the iBig class, when the document loads. When you're adding your image to the page, you've already tried to bind your function to iBig's click event, so the new image doesn't get an event handler associated with it.

You can work around this by using live event binding, which came around in jQuery 1.3 - it works like this:

$('.iBig').live('click', function() {
    alert('clicked the new image');
});

[AnimusImmodicus]

Alright, that seems to have worked. Thank you. However, I am wondering if I have to use live for all of my click events? I guess I don't quite understand what you mean by binding yet. The documentation on the jquery site seems very minimalistic. Am I missing something? Can you elaborate? In the meantime I'll go try to do some searching about it myself.

Thanks again.

[girasquid]

When you call either of these pieces of code:

$('.foo').click(function() {});
$('.foo').bind('click', function() {});

You have bound your function to the 'click' event on all objects with the class 'foo'.

The important thing to note here, however, is that you haven't bound the handler to all objects with that class that ever exist - only the ones that are currently retrieved by $('.foo'). That's where the .live() function comes in - it lets you bind events to everything that currently exists, in addition to listening for new objects with that class and then binding the handler to them as well. In previous versions of jQuery, if you wanted live event binding you'd need something like this:

function bindEvents() {
 $('.foo').click(function() {});
}
$(function() {
 // this code would run when the document loaded, and insert elements with the class 'foo'
 bindEvents();
});

..and then every time that you added an element to the page, you'd call bindEvents() to bind a handler to it.

If you aren't expecting to add more of the element you want a click handler on, you don't need live binding - and while the difference is minimal, I'm told from a performance perspective it's a good idea to only use live binding when you need it.

I hope that's cleared things up - event binding is kind of hard to wrap your head around at first, so if you have any more questions feel free to ask.

[AnimusImmodicus]

While you have been most helpful so far, I'm afraid I still don't quite understand. Perhaps it's a semantics issue for me. When you describe something as bound. Do you mean that the function will only ever work for all currently selected classes? For example:

$(".foo").click(function ()
{
//some code here
});
$('.foo2').click(function ()
{
//some more code that will not work
});

The second function invoked by the click event will never be called even though no new objects are being created?

From another point of view. What do you mean by the following?

Quote

You have bound your function to the 'click' event on all objects with the class 'foo'.

What do you mean exactly? I thought the two functions were different.

This post has been edited by AnimusImmodicus: 05 June 2009 - 10:36 AM

[girasquid]

Sorry, I'm having trouble working out the best way to explain this. I'm going to try a car analogy.

Your event handler is like a car - it does things, and there's a purpose for it. But until you start it, it's not really doing anything - it's just existing. An event handler is the same way - it handles events and reacts to them, but until it's bound to something that will cause the events it handles to happen, it's not really doing anything - just existing.

The two pieces of code I showed you(one with just click(), and one with bind()) are, functionally, the exact same piece of code - the different is just in how the code is being written.

[AnimusImmodicus]

So then the live function is essentially starting every car that currently exists and every new car that comes out of the factory? I think I get it. Thank you so much for your help. However, I still don't understand why my first code doesn't work? Does it only bind the click function to all handlers that currently exist after the DOM is ready? Without using live() how can I get my function to bind to newly created objects?


EDIT: Also if you or someone else is able to point me in the right direction as far as obtaining the "natural" dimensions of an image I would really appreciate it. I tried to use the attr() command to obtain the height and width of an image that had a certain id, like so...

$(".iSmall").click(function ()
{
	var viewportWidth = $(window).width();  
	var viewportHeight = $(window).height();
	var theheight = $(this).attr("height");
	var thewidth = $(this).attr("width");
});

However, this only gives me the dimensions of the image as they are currently displayed on the screen (scaled to a max-height or max-width by CSS). Does anyone know a way to obtain the actual dimensions of the image using jquery. I read something about preloading the images but I don't want to have to use that if I don't have to.

This post has been edited by AnimusImmodicus: 08 June 2009 - 07:11 AM