<button>jQuery onclick只工作一次</button>
[英]<button> JQuery onclick works only once
问题描述
我有一个按钮onclick事件，可以像下面这样正常工作：
// 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/
按钮“ Maak Afspraak”在弹出窗口中提供了一个弹出窗口，其中有一个按钮“ Ga naar aanmelden”链接到外部链接。
我无法使用此链接。 单击时，没有任何反应。 在我的演示设置中，相同的代码运行良好。
有什么提示吗？ 不要看我在做什么错。
谢谢！
1 个解决方案
解决方案1
0 已采纳 2015-03-16 21:10:47
更换你的.click()方法.on()方法，并把它们里面$(document).ready页面底部
在您的情况下，可以使用类似下面的方法来代替if ( $( "button.link" ).length ) 。
$("body").on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
总体而言，您的脚本应该看起来像这样
$(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;
};
});
我已经在您的网站上对其进行了测试，之后似乎还可以正常工作。 我被重定向到了一个登录页面。
希望这可以帮助。
onClick按钮只能工作一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.