在jquery

Question

我使用elem.off()来阻止svg动画完成后的点击次数。我想要禁用点击，但不知怎的，它不会重新启用它。

这是我的代码示例：

/*main jquery content*/

$('.hamburger a').click(function(event) {
  'use strict';
  event.preventDefault();
  $(this).off('click');
  $('.menubar').toggleClass('show');
  setTimeout(delayed, 300);
});

function delayed() {
  $('.hamburger a').on('click');
}

.home-header {
  background-color: #333;
  margin: 0;
  padding: 0 0.9375rem;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}
.hamburger {
  float: right;
  position: relative;
  width: 50px;
  z-index: 5010;
}
.hamburger a {
  display: block;
  height: 50px;
  padding: 0;
  width: 50px;
}
.menubar {
  -webkit-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  background-color: rgba(0, 37, 127, 0.95);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 5000;
}
.menubar.show {
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="home-header">
  <div class="hamburger">
    <a href="#" class="open">
      <svg id="hamburger" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
        <desc>Created with Snap</desc>
        <defs></defs>
        <g style="opacity: 1;">
          <path d="M13,13v24h24V13H13zM36,36H14V14h22V36z" fill="#ffffff"></path>
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
          <path d="M19,20H31V22H19z" fill="#ffffff"></path>
          <path d="M19,28H31V30H19z" fill="#ffffff"></path>
        </g>
        <g style="opacity: 0;">
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
        </g>
      </svg>
    </a>
  </div>
</header>

<div class="menubar">
  <div class="menuwrapper">
    Somecontent
  </div>
</div>

使用$('.hamburger a').on('click');启用点击的任何想法都不起作用？

Answer 1

您需要提供再次执行click事件的功能。试试这个：

var hamburgerClick = function(e) {
    e.preventDefault();
    $(this).off('click');
    $('.menubar').toggleClass('show');
    setTimeout(delayed, 300);
}

$('.hamburger a').click(hamburgerClick);

function delayed() {
    $('.hamburger a').on('click', hamburgerClick);
}

Answer 2

创建单独的函数以在click事件

上分配

＆＃13;

＆＃13;

/*main jquery content*/

function hamburgerClick (event) {
  'use strict';
  event.preventDefault();
  $(this).off('click');
  $('.menubar').toggleClass('show');
  setTimeout(delayed, 300);
}

$('.hamburger a').on('click',hamburgerClick);

function delayed() {
  $('.hamburger a').on('click',hamburgerClick);
}

＆＃13;

.home-header {
  background-color: #333;
  margin: 0;
  padding: 0 0.9375rem;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}
.hamburger {
  float: right;
  position: relative;
  width: 50px;
  z-index: 5010;
}
.hamburger a {
  display: block;
  height: 50px;
  padding: 0;
  width: 50px;
}
.menubar {
  -webkit-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  background-color: rgba(0, 37, 127, 0.95);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 5000;
}
.menubar.show {
  opacity: 1;
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="home-header">
  <div class="hamburger">
    <a href="#" class="open">
      <svg id="hamburger" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
        <desc>Created with Snap</desc>
        <defs></defs>
        <g style="opacity: 1;">
          <path d="M13,13v24h24V13H13zM36,36H14V14h22V36z" fill="#ffffff"></path>
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
          <path d="M19,20H31V22H19z" fill="#ffffff"></path>
          <path d="M19,28H31V30H19z" fill="#ffffff"></path>
        </g>
        <g style="opacity: 0;">
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
          <path d="M19,24H31V26H19z" fill="#ffffff"></path>
        </g>
      </svg>
    </a>
  </div>
</header>

<div class="menubar">
  <div class="menuwrapper">
    Somecontent
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该切换一个类并委托事件，以避免在此元素上绑定任何click事件。

所以要绑定它，请使用：

$('.hamburger').on('click', 'a:not(.disabled)', function(){...});

要避免触发事件，只需添加class而不是unbind事件：

$('.hamburger').find('a').addClass('disabled');

要重新设置它，只需删除此类：

$('.hamburger').find('a').removeClass('disabled');