Jquery function only works on second click

Question

I have site writen i ASP.NET. In my menu i have a login button, which looks like this: <a href="#" id="loginClick" class="popup-link-1" onclick="test()">Log Ind</a>

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:

 function test() {

  //    alert("Test inside");
  $('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Du skal logge ind for at leje</h2></div><div class="bottom">Log Ind!</div></div>');
  $('body').append('<div id="blackout"></div>');



  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);
  });



}

After the second click i works perfectly.. Am i missing something? Thanks.

The Usercontrol looks like this

    <div class="popup-box" id="popup-box-1">
  <div class="close">X</div>
  <div class="top">
    <h2>Her kan du logge ind</h2>
  </div>
  <div class="bottom">



    <div>
      <table style="width: auto">
        <tr>
          <td></td>
          <td>
            <uc:UcLoginUser runat="server" ID="UcLoginUser1" />
          </td>
        </tr>
      </table>
    </div>



  </div>

</div>

Do not use snipplets if it is not functioning examples. Just use a code block. — epascarello, Feb 24 '15 at 15:27
Is it necessary, when the function is inside the: in my HTML document? — Emil Hein, Feb 24 '15 at 15:30

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

Here is my test snippet ( vanillaJs ) regarding your problem:

www.jsfiddle.net/40uovxgt/2/

Next you can read about this problem in general:

HTML tag <a> want to add both href and onclick working

In my opinion, if you use jQuery, you should bind events using jQuery built-in solutions

edited May 23 '17 at 12:12

Community

1
1

answered Feb 24 '15 at 15:42

kuba

1,019
1
18
39

It's preferable to include the major portions of the answers in the text - rather than only linking out to resources. See http://stackoverflow.com/help/how-to-answer. Can you add code snippets to your answer? – Chad Killingsworth Feb 24 '15 at 15:50
I actually don't care about the href. – Emil Hein Feb 24 '15 at 15:54

Jquery function only works on second click

1 Answers1