Jquery函数仅在第二次单击时起作用

Question

我有网站写我的ASP.NET。 在我的菜单中，我有一个登录按钮，如下所示： <a href="#" id="loginClick" class="popup-link-1" onclick="test()">Log Ind</a>

这应该使用Jquery打开一个弹出窗口。 我的问题是，我只能在第二次点击后调用方法。 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标记<a>想要添加href和onclick工作

在我看来，如果你使用jQuery，你应该使用jQuery内置解决方案绑定事件