JQuery onclick只工作一次

我有一个按钮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  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; } 

       popup button 1  close 
your content title 1
 
your content 1
   popup button 2  close 
your content title 2
 
your content 2
   link button 3 
Here, you have a JS-less equivalent, but with much more CSS (LESS): http://codepen.io/maccadb7/pen/nbHEg
   

在此项目中使用相同的代码： http ： //kine.sarabernaert.be/contact/

按钮’Maak Afspraak’在弹出窗口弹出一个弹出按钮’Ga naar aanmelden’链接到外部链接。

我无法使用此链接。 点击时，没有任何反应。 在我的演示设置中，相同的代码运行良好。

任何提示？ 不要看我做错了什么。

谢谢！

Answer 1

将.on()方法替换为.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; }; }); 

我在你的网站上测试了它，之后它似乎正在工作。 我猜想我被重定向到登录页面。

希望这可以帮助。