Question

我有一个按钮onclick事件，可以正常工作：

＆＃13;

// 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);
    }

 );
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在此项目中使用相同的代码：http://kine.sarabernaert.be/contact/

Button＆＃39; Maak Afspraak＆＃39;给出一个弹出窗口   在弹出窗口上有一个按钮＆＃39; Ga naar aanmelden＆＃39;链接到外部链接。


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

任何提示？不要看我做错了什么。

THX！

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>

1 个答案: