<button> JQuery onclick 只工作一次答案

【问题标题】：<button> JQuery onclick works only once<button> JQuery onclick 只工作一次
【发布时间】：2015-03-16 20:44:19
【问题描述】：

我有一个可以正常工作的按钮 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”。

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

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

谢谢！

【问题讨论】：

但 Ga naar aanmelden 不是 <a> 导航到另一个链接
您在使用某种类型的插件或库吗？否则就像 Dhiraj 说的那样，您没有使用锚标签。按钮不会带你到任何链接，你需要使用a标签来代替
Javascript 正在做的事情是在点击时做一些事情。

标签： javascript jquery button onclick

【解决方案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;
    };
});

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

希望这会有所帮助。

【讨论】：