javascript - 如何在标签中使用jquery函数

Question

我正在尝试使用一些功能(例如侧面板)来打开，但使用 <a>标签。

您能帮我一下吗，下面是相关的代码。

HTML

<a href="#">Click Me</a>

jQuery

jQuery(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
    });
    //close the lateral panel
    $('.cd-panel').on('click', function(event){
        if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel').removeClass('is-visible');
            event.preventDefault();
        }
    });
});

我想利用上面的 jQuery 并在我的 <a> 中使用它标签。

Answer 1

将 click 事件附加到 body 并委托(delegate)给 cd-btn。直接向元素添加事件处理程序 doesn't handle dynamic elements 。元素 cd-btn 位于弹出窗口中。弹出 HTML 是动态注入(inject)的，因此当您附加事件时，HTML 可能不存在。但是您可以轻松地将处理程序添加到 body 并委托(delegate)它，如下所示:

  $('body').on('click', '.cd-btn',function(event) {
    event.preventDefault();
    $('.cd-panel').addClass('is-visible'); 
  });

jQuery(function($) {
  //open the lateral panel
  $('body').on('click', '.cd-btn',function(event) {
    event.preventDefault();
    $('.cd-panel').addClass('is-visible'); 
  });
  //close the lateral panel
  $('.cd-panel').on('click', function(event) {
    if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
      $('.cd-panel').removeClass('is-visible');
      event.preventDefault();
    }
  });
});

$(function() {
  $("#popover-a").popover({
    html: true,
    trigger: 'click hover',
    delay: {
      show: 50,
      hide: 3500
    },
    content: function() {
      return $('#popover-content-a').html();
    }
  });
  $("#popover-b").popover({
    html: true,
    trigger: 'click hover',
    delay: {
      show: 50,
      hide: 3500
    },
    content: function() {
      return $('#popover-content-b').html();
    }
  });
});

.circle-macro {
  border-radius: 50%;
  background-color: rgb(68, 104, 125);
  color: white;
  padding: 0 8px;
  font-family: 'Times New Roman';
  font-style: italic;
  z-index: 10;
  cursor: pointer;
}
.hidden {
  display: none;
}
.cd-main-content {
  text-align: center;
}
.cd-main-content .cd-btn {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  font-family: 'Open Sans', sans-serif;
  z-index: 9;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}
.cd-panel-header {
  position: fixed;
  height: 27px;
  background-color: transparent;
  z-index: 2;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  -webkit-transition: top 0.3s 0s;
  -moz-transition: top 0.3s 0s;
  transition: top 0.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
  top: -50px;
}
.from-right .cd-panel-header {
  right: 0;
}
.from-left .cd-panel-header {
  left: 0;
}
.is-visible .cd-panel-header {
  top: 0;
  -webkit-transition: top 0.3s 0.3s;
  -moz-transition: top 0.3s 0.3s;
  transition: top 0.3s 0.3s;
}
.cd-panel-container {
  position: fixed;
  height: 100%;
  top: 0;
  background: #fafafa;
  border-left: 1px solid #c8cacc;
  z-index: 1;
  width: 70%;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
  z-index: 1;
  overflow-y: auto;
}
.from-right .cd-panel-container {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
  Title
</div>
<div class="container">
  <i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>

  <div id="popover-content-a" class="hidden">
    <div>
      <h6><b>Heading</b></h6>
      <p>Content <a href="#" class="cd-btn">Click Me</a>
      </p>
    </div>
  </div>
  <br>

  <i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>

  <div id="popover-content-b" class="hidden">
    <div>
      <h6><b>Heading</b></h6>
      <p>Content <a href="#" class="cd-btn">Click Me</a>
      </p>
    </div>
  </div>

</div>

<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <a href="#0" class="cd-panel-close">Close</a>
  </header>
  <div class="cd-panel-container">


CD PANEL
  </div>
  <!-- cd-paneCD PANELl-container -->
</div>
<!-- cd-panel -->