タグで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に添付し、cd-btnに委任します。要素に直接イベントハンドラを追加doesn't handle dynamic elements。要素cd-btnがポップアップに表示されます。ポップアップHTMLは動的に挿入されるため、イベントをアタッチすると、HTMLが存在しない可能性があります。あなたはjqueryのの基本を知っています

$('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 -->