Функция Jquery работает только при втором нажатии

Question

У меня есть сайт writen i ASP.NET. В моем меню у меня есть кнопка входа в систему, которая выглядит так: <a href="#" id="loginClick" class="popup-link-1" onclick="test()">Log Ind</a>

Это должно открыть всплывающее окно с использованием JQuery. Моя проблема в том, что метод im call работает только после второго щелчка. функция test() выглядит так:

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



} 

После второго щелчка я отлично работаю .. Я что-то пропустил? Благодарю.

UserControl выглядит следующим образом

<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> 

Answer 1

Вот мой тест сниппет (vanillaJs) о вашей проблеме:

www.jsfiddle.net/40uovxgt/2/ 

Далее вы можете прочитать об этой проблеме в целом:

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

На мой взгляд, если вы используете jQuery, вы должен связывать события с помощью встроенных решений jQuery