javascript - 单击 Handlebars 模板中的“真棒字体”图标

单击动态创建的“真棒字体”图标时，触发弹出窗口时遇到一些麻烦。

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

这是行不通的，现在我在想它是否与Handlebar模板有关？

我该如何处理？

最佳答案

当您运行

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

，handlebar创建了元素，但尚未将其添加到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');
});