<button> JQuery onclick works only once
Question
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>
Using the same code in this project: 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. When click, nothing happens. In my demo setup, same code is working well.
Any hints? Don't see what I'm doing wrong.
Thx!
1 answers
solution1
0 ACCPTED 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
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.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.