<button>jQuery onclick只工作一次</button>
[英]<button> JQuery onclick works only once
问题描述
I have a button onclick event that works fine like here: 
我有一个按钮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>
Using the same code in this project: http://kine.sarabernaert.be/contact/ 在此项目中使用相同的代码： http : //kine.sarabernaert.be/contact/
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.
Any hints? 有什么提示吗？ Don't see what I'm doing wrong. 不要看我在做什么错。
Thx! 谢谢！
1 个解决方案
解决方案1
0 已采纳 2015-03-16 21:10:47
Replace your .click() method to .on() method and place them inside $(document).ready at the bottom of the page 更换你的.click()方法.on()方法，并把它们里面$(document).ready页面底部
In your case, instead of if ( $( "button.link" ).length ) you can use something like below. 在您的情况下，可以使用类似下面的方法来代替if ( $( "button.link" ).length ) 。
$("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. 我被重定向到了一个登录页面。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.