<button> JQuery onclick 只工作一次

Question

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

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.

有什么提示吗？别看我做错了什么。

谢谢！

Answer 1

将您的 .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;
    };
});

我在您的网站上对其进行了测试，之后它似乎可以正常工作。我猜我被重定向到了登录页面。

希望这对您有所帮助。

<button> JQuery onclick 只工作一次

<button> JQuery onclick works only once

javascript

jquery

onclick

button