title: Jquery function only works on second click
body: <p>I have site writen i ASP.NET. In my menu i have a login button, which looks like this: <code>&lt;a href="#" id="loginClick" class="popup-link-1" onclick="test()"&gt;Log Ind&lt;/a&gt;</code></p>
  
  <p>This should open a popup, using Jquery. My problem is that the method im calling only works after the second click. the test() function looks like this: </p>
  
  <pre><code> function test() {
  
    //    alert("Test inside");
    $('body').append('&lt;div class="popup-box" id="popup-box-1"&gt;&lt;div class="close"&gt;X&lt;/div&gt;&lt;div class="top"&gt;&lt;h2&gt;Du skal logge ind for at leje&lt;/h2&gt;&lt;/div&gt;&lt;div class="bottom"&gt;Log Ind!&lt;/div&gt;&lt;/div&gt;');
    $('body').append('&lt;div id="blackout"&gt;&lt;/div&gt;');
  
  
  
    var boxWidth = 350;
  
    function centerBox() {
      /* Preliminary information */
      var winWidth = $(window).width();
      var winHeight = $(document).height();
      var scrollPos = $(window).scrollTop();
      /* auto scroll bug */
      /* Calculate positions */
      var disWidth = (winWidth - boxWidth) / 2;
      var disHeight = scrollPos + 150;
      /* Move stuff about */
  
      $('.popup-box').css({
        'width': boxWidth + 'px',
        'left': disWidth + 'px',
        'top': disHeight + 'px'
      });
      $('#blackout').css({
        'width': winWidth + 'px',
        'height': winHeight + 'px'
      });
      return false;
    }
    $(window).resize(centerBox);
    $(window).scroll(centerBox);
    centerBox();
  
  
    $('[class*=popup-link]').click(function(e) {
      /* Prevent default actions */
      e.preventDefault();
      e.stopPropagation();
      ///* Get the id (the number appended to the end of the classes) */
      var name = $(this).attr('class');
      var id = name[name.length - 1];
      var scrollPos = $(window).scrollTop();
      /* Show the correct popup box, show the blackout and disable scrolling */
      $('#popup-box-' + id).show();
      $('#blackout').show();
      $('html,body').css('overflow', 'hidden');
      ///* Fixes a bug in Firefox */
      $('html').scrollTop(scrollPos);
    });
  
    $('[class*=popup-box]').click(function(e) {
  
      /* Stop the link working normally on click if it's linked to a popup */
      e.stopPropagation();
    });
    $('html').click(function() {
      var scrollPos = $(window).scrollTop();
      /* Hide the popup and blackout when clicking outside the popup */
      $('[id^=popup-box-]').hide();
      $('#blackout').hide();
      $("html,body").css("overflow", "auto");
      $('html').scrollTop(scrollPos);
    });
    $('.close').click(function() {
      var scrollPos = $(window).scrollTop();
      /* Similarly, hide the popup and blackout when the user clicks close */
      $('[id^=popup-box-]').hide();
      $('#blackout').hide();
      $("html,body").css("overflow", "auto");
      $('html').scrollTop(scrollPos);
    });
  
  
  
  }
  </code></pre>
  
  <p>After the second click i works perfectly.. Am i missing something? Thanks.</p>
  
  <p>The Usercontrol looks like this</p>
  
  <pre><code>    &lt;div class="popup-box" id="popup-box-1"&gt;
    &lt;div class="close"&gt;X&lt;/div&gt;
    &lt;div class="top"&gt;
      &lt;h2&gt;Her kan du logge ind&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="bottom"&gt;
  
  
  
      &lt;div&gt;
        &lt;table style="width: auto"&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;uc:UcLoginUser runat="server" ID="UcLoginUser1" /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
  
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>