[英]Jquery function only works on second click
我有網站寫我的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>
這是關於你的問題的我的測試片段(vanillaJs):
www.jsfiddle.net/40uovxgt/2/
接下來,您可以閱讀有關此問題的一般信息:
在我看來,如果你使用jQuery,你應該使用jQuery內置解決方案綁定事件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.