<按钮> JQuery onclick只工作一次 [英] <button> JQuery onclick works only once
问题描述
我有一个按钮onclick事件可以正常工作：
I have a button onclick event that works fine like here:
// create function to remove "popup-open" classes
// function used in onclick attribute
(function( $ ){
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
})( jQuery );
// if a <button> exists
// onclick read button ID value
// add "popup-open" class to span with IDvalue as class, with fadein effect
if ( $( "button.popup" ).length )
{
$("button.popup").click( function()
{
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}
);
}
if ( $( "button.link" ).length )
{
$("button.link").click( function()
{
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
//alert(btnFormAction);
window.open(btnFormAction, btnTarget);
}
);
}
button {
padding: 10px;
font-size: 1.5rem;
background-color: #d5d5d5;
border: 3px solid #ddd;
margin: 15px;
box-shadow: 0px 0px 15px #888888;
cursor: pointer;
}
button:hover {
box-shadow: 0px 0px 10px #888888;
}
body:after {
content: "";
display: none;
position: fixed; /* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background: rgba(0,0,0,0.6);
}
.overlay_btn {
display: none;
padding: 10px;
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
body.popup-open:after, .popup-open {
display: block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!--create a button with unique ID* -->
<button id="btn-popup01" class="popup">popup button 1</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup01"><a href="#" onclick="$(this).popupClose();">close</a>
<h3>your content title 1</h3>
<p>your content 1</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-popup02" class="popup">popup button 2</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup02"><a href="#" onclick="$(this).popupClose();">close</a>
<h3>your content title 2</h3>
<p>your content 2</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>
<p>Here, you have a JS-less equivalent, but with much more CSS (LESS): <a href="http://codepen.io/maccadb7/pen/nbHEg" target="_blank">http://codepen.io/maccadb7/pen/nbHEg</a></p>
</body>
</html>
使用相同的此项目中的代码： http://kine.sarabernaert.be/contact/
Using the same code in this project: http://kine.sarabernaert.be/contact/
按钮'Maak Afspraak'弹出窗口弹出
，其中有一个按钮'Ga naar aanmelden'链接到外部链接。
Button 'Maak Afspraak' gives a popup on the popup there's a button 'Ga naar aanmelden' that links to a outside link.
我无法使用此链接。点击时，没有任何反应。在我的演示设置中，相同的代码运行良好。
I can't get working this link. When click, nothing happens. In my demo setup, same code is working well.
任何提示？看不出我做错了什么。
Any hints? Don't see what I'm doing wrong.
Thx！
推荐答案
将 .click（）方法替换为 .on（）方法并将其放入 $（document）.ready 位于页面底部
Replace your .click() method to .on() method and place them inside $(document).ready at the bottom of the page
在您的情况下，而不是 if（ $（button.link）。length）您可以使用以下内容。
In your case, instead of if ( $( "button.link" ).length ) you can use something like below.
$("body").on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
总的来说，你的脚本可能看起来像这样
Overall, your scripts should probably look like this
$(document).ready(function(){
$("body").on("click", "button.popup", function(){
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}).on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
});
我在你的网站上测试了它，之后它似乎正在工作。我猜想我被重定向到登录页面。
I tested it on your site and it seems to be working after that. I got redirected to a login page I guess.
希望这有帮助。
这篇关于<按钮> JQuery onclick只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
