クリックしてフォント素晴らしいアイコン

Question

動的

index.ejs

<!-- Template for Snazzy Window --> 
<script id="marker-content-template" type="text/x-handlebars-template"> 
    <div class="custom-img" style="background-image: url({{{bgImg}}})"></div> 
    <section class="custom-content"> 
     <h1 class="custom-header"> 
      {{title}} <i class="fa fa-question-circle" data-placement="right" data-toggle="popover" data-container="body" data-content="And here's some amazing content. It's very engaging. Right?"></i> 
      <small>{{governance}}</small> 
     </h1> 
     <div class="custom-body">{{{body}}}</div> 
    </section> 
</script> 

<script type="text/javascript> 
    $(function() { 
    var template = Handlebars.compile($('#marker-content-template').html()); 
    }); 
</script> 

作成され、私は

を含むさまざまな方法を試してみたフォント素晴らしいアイコンをクリックしたときに、私はポップオーバーをトリガするいくつかの問題を抱えています

$(document).on('click', '.fa', function(){ 
    $('[data-toggle="popover"]').popover('toggle'); 
}); 

これはうまくいかず、ハンドルバーテンプレートと何か関係がありますか？

私はこれにどのようにアプローチできますか？あなたは

$(document).on('click', '.fa', function(){ 
    $('[data-toggle="popover"]').popover('toggle'); 
}); 

を実行すると

おかげ

Answer 1

は、ハンドルバーは、要素を作成したが、DOMにそれを追加していません。あなたのコード中のSO

答えではなく、私のニーズのために正確な答えのための

// 1. Create the element from template with handlebar 
var template = Handlebars.compile($('#marker-content-template').html()); 
// 2. Add the element to the DOM 
document.getElementById('#yourTargetContainerId').innerHTML = template; 
// 3. add the eventlistener to the elements 
$(document).on('click', '.fa', function(){ 
    $('[data-toggle="popover"]').popover('toggle'); 
});