Why doesn't the .click() not work in this instance?
Basically what this does is fadeIn pre-existing divs and then loads an image. When the image is loaded it then appends that into one of the pre-existing divs. Then it appends a new div with an id of xButton. Then later it $('#xButton').click() should hide the 3 divs. However it just doesn't work. If I change the click() to either #modalImage or #overlay, it works but just not for the #xButton. I would really like to figure out why its not working and how I should be doing this instead. Thanks.



    $(function(){
                    $('#container a').click(function(e){
                        e.preventDefault();
                        var id = $(this).attr('href'),
    					img = new Image();
    					
                        
                        $('#overlay').fadeIn(function(){
                            $('#modalImage').fadeIn();
                            
                        });
                        
                        $(img).load(function(){
                            $(this).hide();
                            $('#modalImage').removeClass('loader').append(this);
                            $(this).fadeIn(function(){
                                var ih = $(this).outerHeight(),
    							iw = $(this).outerWidth(),
    							newH = ($(window).height()/10)*7,
    							newW = ($(window).width()/10)*7;
    							
    							
    							if (ih >= iw && ih >= newH) {
    								$(this).css('height',newH + 'px');
    								$(this).css('width', 'auto');
    							}
    							else if (ih >= iw && newH > ih) {
    								$(this).css('height', ih + 'px');
    								$(this).css('width', 'auto');
    							}
    							else if (iw > ih && iw >= newW) {
    								if ((newW / (iw / ih)) > newH) {
    									$(this).css('width', 'auto');
    									$(this).css('height', newH + 'px');
    								}
    								else {
    									$(this).css('width', newW + 'px');
    									$(this).css('height', 'auto');
    								}
    								
    							}
    							else  {
    								$(this).css('width', iw + 'px');
    								$(this).css('height', 'auto');
    							}
    							
    							var padW = ($(window).width() - $(this).outerWidth()) / 2, 
    							padH = ($(window).height() - $(this).outerHeight()) / 2;
    							console.log (padH + ' ' + padW);
    							    $(this).css('top', padH);
                                  $(this).css('left', padW);
                                
    							if($('#overlay').is(":visible") == true) {
    								ih = ih + 4;
    								$('<div id="xButton">x</div>').appendTo('#modalImage');
    								if (padH >= 0) {
    									$('#xButton').css('top', padH - 4).css('right', padW - 65);
    								}
    								else {
    									$('#xButton').css('top', '20px').css('right', padW - 65);
    								}
    							}
                            });
                            
                        }).attr('src', id);
                    });
                    $('#xButton').click(function(){
    					$(this).hide();
                        $('#overlay').fadeOut(function(){
                            $('#modalImage img').css('top', '-9999px').remove();
                            $('#xButton').remove();
                            $('#modalImage').addClass('loader');
                        });
                    });
                });
Why doesn't the .click() not work in this instance?
===

Basically what this does is fadeIn pre-existing divs and then loads an image. When the image is loaded it then appends that into one of the pre-existing divs. Then it appends a new div with an id of xButton. Then later it $('#xButton').click() should hide the 3 divs. However it just doesn't work. If I change the click() to either #modalImage or #overlay, it works but just not for the #xButton. I would really like to figure out why its not working and how I should be doing this instead. Thanks.



    $(function(){
                    $('#container a').click(function(e){
                        e.preventDefault();
                        var id = $(this).attr('href'),
    					img = new Image();
    					
                        
                        $('#overlay').fadeIn(function(){
                            $('#modalImage').fadeIn();
                            
                        });
                        
                        $(img).load(function(){
                            $(this).hide();
                            $('#modalImage').removeClass('loader').append(this);
                            $(this).fadeIn(function(){
                                var ih = $(this).outerHeight(),
    							iw = $(this).outerWidth(),
    							newH = ($(window).height()/10)*7,
    							newW = ($(window).width()/10)*7;
    							
    							
    							if (ih >= iw && ih >= newH) {
    								$(this).css('height',newH + 'px');
    								$(this).css('width', 'auto');
    							}
    							else if (ih >= iw && newH > ih) {
    								$(this).css('height', ih + 'px');
    								$(this).css('width', 'auto');
    							}
    							else if (iw > ih && iw >= newW) {
    								if ((newW / (iw / ih)) > newH) {
    									$(this).css('width', 'auto');
    									$(this).css('height', newH + 'px');
    								}
    								else {
    									$(this).css('width', newW + 'px');
    									$(this).css('height', 'auto');
    								}
    								
    							}
    							else  {
    								$(this).css('width', iw + 'px');
    								$(this).css('height', 'auto');
    							}
    							
    							var padW = ($(window).width() - $(this).outerWidth()) / 2, 
    							padH = ($(window).height() - $(this).outerHeight()) / 2;
    							console.log (padH + ' ' + padW);
    							    $(this).css('top', padH);
                                  $(this).css('left', padW);
                                
    							if($('#overlay').is(":visible") == true) {
    								ih = ih + 4;
    								$('<div id="xButton">x</div>').appendTo('#modalImage');
    								if (padH >= 0) {
    									$('#xButton').css('top', padH - 4).css('right', padW - 65);
    								}
    								else {
    									$('#xButton').css('top', '20px').css('right', padW - 65);
    								}
    							}
                            });
                            
                        }).attr('src', id);
                    });
                    $('#xButton').click(function(){
    					$(this).hide();
                        $('#overlay').fadeOut(function(){
                            $('#modalImage img').css('top', '-9999px').remove();
                            $('#xButton').remove();
                            $('#modalImage').addClass('loader');
                        });
                    });
                });