jquery函數僅適用於第二次點擊

Question

我有網站寫我ASP.NET。在我的菜單中，我有一個登錄按鈕，如下所示：<a href="#" id="loginClick" class="popup-link-1" onclick="test()">Log Ind</a>

這應該會打開一個彈出窗口，使用Jquery。我的問題是，即時通話方法只能在第二次點擊後才起作用。測試（）功能看起來像這樣：

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



} 

第二次點擊後，我的作品完美..我錯過了什麼？謝謝。

用戶控件看起來像這樣

<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內置解決方案綁定事件