Question

我创建了一个Handlebars模板来显示图片行。我想要做的是让用户将鼠标悬停在图像上并在工具提示框中读取信息。但是，我无法找出工具提示在模板中不起作用的原因。这就是我得到的：

模板：

<script id="test-template" type="text/x-handlebars-template">
            {{#place}}
                <h5>{{year}}</h5>

                 {{#people}}

                 <a href="#" class="popper" data-popbox="pop1">
                     <div class="people">
                        <img src="{{ pic }}">
                    </div>
                </a>
                    <div id="pop1" class="popbox">
                        <h2>{{ name }}</h2>
                        <p> {{ dob }} </p>
                    </div>

                {{/people}}
            {{/place}}
</script>

这是我正在使用的工具提示脚本。它适用于模板之外的任何内容。我也考虑过使用jQuery，但我遇到了同样的问题。

<script>
jQuery(function ($) {
    function mouseoverActiontooltipImage(event){
        $("body").append("<div id='box'></div>"); //Would like to use another div
        $("#box").css("left",(event.pageX + 20) + "px");
        $("#box").css("top",(event.pageY - 10) + "px");
    }

    function mouseoutActiontooltipImage(event){
        $("#box").remove();
    }

    function mousemoveActiontooltipImage(event){
        $("#box").css("left",(event.pageX + 20) + "px");
        $("#box").css("top",(event.pageY - 10) + "px");
    }
   $('.people').bind('mouseover', mouseoverActiontooltipImage);
   $('.people').bind('mouseout', mouseoutActiontooltipImage);
   $('.people').bind('mousemove', mousemoveActiontooltipImage);

});

</script>

编辑：我使用新的Handlebars模板和工具提示代码更新了我的问题。我可以将鼠标悬停在模板外的div上，然后会弹出一个弹出窗口，但我仍然无法在模板中看到它。

编辑2 ：我找到了一个临时解决方案，导致另一个问题here。

Answer 1

听起来你的JavaScript绑定只发生在之前你的Handlebars模板被使用并添加到DOM中。在将添加到DOM之后，您需要将您的悬停代码绑定到每个新模板使用的事件。

Handlebars模板中的鼠标悬停弹出窗口

1 个答案: