單擊字體真棒圖標

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

不工作，現在我想它是否與車把模板有關？

我該如何解決這個問題？

感謝

Answer 1

當您運行

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

，車把創建的元素，但還沒有把它添加到DOM。

因此，在你的代碼

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