爲什麼.click（）在這種情況下不起作用？

基本上這是做的是淡入預先存在的div，然後加載圖像。當圖像被加載後，它會將其添加到其中一個預先存在的div中。然後它添加一個帶有xButton ID的新div。然後它$（'＃xButton'）。click（）應該隱藏3個div。但它不起作用。如果我將click（）更改爲#modalImage或#overlay，它可以工作，但不適用於#xButton。我真的很想弄清楚爲什麼它不能正常工作，我應該怎麼做。謝謝。爲什麼.click（）在這種情況下不起作用？

$(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'); 
        }); 
       }); 
      });

來源

2010-04-15 Deshiknaves