Pourquoi le .click() ne fonctionne-t-il pas dans cette instance?

Question

Fondamentalement, ce que cela fait est fadeIn divs préexistant, puis charge une image. Lorsque l'image est chargée, elle l'ajoute dans l'une des divs préexistantes. Ensuite, il ajoute une nouvelle div avec un identifiant de xButton. Puis plus tard $ ('# xButton'). Click() devrait cacher les 3 divs. Cependant, cela ne fonctionne tout simplement pas. Si je change le click() en #modalImage ou en #overlay, cela fonctionne mais pas pour le #xButton. Je voudrais vraiment comprendre pourquoi cela ne fonctionne pas et comment je devrais faire cela à la place. Merci.

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

Answer 1

Si vous configurez un élément dont vous avez besoin pour lier un auditeur, moyen le plus simple est dynamiquement en utilisant la fonction jquery en direct():

http://api.jquery.com/live/

Answer 2

On dirait xButton est créé après le clic est attaché à temps. Si vous allez faire cela, vous devez vous assurer de mettre le xButton.click après la création de xButton, pas avant. Ou, vous pouvez utiliser les méthodes live ou delegate comme décrit dans les documents.