<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.