javascript - <button> JQuery onclick works only once -

-

i have button onclick event works fine here: 

// create function 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 <button> exists  // onclick read button id value  // add "popup-open" class span idvalue class, 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; /* 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 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 button unique id* -->      <button id="btn-popup01" class="popup">popup button 1</button>      <!-- create span button#idvalue 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 button unique id* -->      <button id="btn-popup02" class="popup">popup button 2</button>      <!-- create span button#idvalue 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 button unique id* -->      <button id="btn-link01" class="link" formaction="http://s.emp.re/1kazexz" formtarget="_blank">link button 3</button>                  <p>here, have js-less equivalent, more css (less): <a href="http://codepen.io/maccadb7/pen/nbheg" target="_blank">http://codepen.io/maccadb7/pen/nbheg</a></p>                </body>  </html>

using same code in project: http://kine.sarabernaert.be/contact/

button 'maak afspraak' gives popup on popup there's button 'ga naar aanmelden' links outside link.

i can't working link. when click, nothing happens. in demo setup, same code working well.

any hints? don't see i'm doing wrong.

thx!

replace .click() method .on() method , place them inside $(document).ready @ bottom of page

in case, instead of if ( $( "button.link" ).length ) can use below.

$("body").on('click', 'button.link', function(){      var btnformaction = $(this).attr('formaction');     var btntarget = $(this).attr('formtarget');     window.open(btnformaction, btntarget);         });

overall, scripts should 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 on site , seems working after that. got redirected login page guess.

hope helps.


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

-
i've been working on making 2d map editor past 2 weeks or so, , i've run strange problem. trying optimize code, example, making functions should've been functions begin with, did made cpu usage go through roof. i've tried commenting out different sections of code thought culprits (scrolling, rendering, other calculations) no avail. think issue might trying call things within different functions, sake of making modular possible, i'd functionality. the other major change i've made since file i'm comparing i've ported variables external cpp file, since having variables global makes lot easier use within different functions. simple issue, can't life of me understand why happens. with original code, around 2-3% cpu usage. new code, around 20-35%, but, if move mouse around, it'll drop around 6-8%. tl;dr: after trying optimize code using functions, i've somehow killed performance, , found strange quirk moving mouse reduces cpu usage.. /...
Read more