hover effect in handlebars

Question

I have a handlebars template that loop through users in tables:

    <script type ="mustache/x.tmpl" id="helloTmpl">

    {{#.}}
        <table class="torben">
            <tr>   
                <th>
                    {{user}}
                </th>
            </tr>
            <tr>   
                <th>
                    <div id="a1"> More Info </div>
                    <div class="contenthover">
                        More {{content}} here.
                    </div>
                </th>
            </tr>
        </table>
    {{/.}}

    </script>

Moreover I have script containing the hover effect:

    $(document).ready(function()
    {
        $('#a1').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8
        });
    });

and ofcourse some css, bootstrap, jquery.contenthover.js and AJAX module, and so on. The problem is that the above hover effect doesn't work! If I pull out

              <div id="a1"> More Info </div>
              <div class="contenthover">
                  More {{content}} here.
              </div>

from the loop and put it in plain html, the hover effect works great (without the {{content}} though), but not in the template where I have the ability to run through data so that {{content}} should be displayed. I have hard time figuring out a solution for this. Any suggestions? Thanks

Answer 1

Thanks 76484, but I figured it out:

My problem was that I forgot to target the div that actually display the result from the template. The following div does that in the html:

  <div id="box">Loading...</div>  

My hover effect can thus target that one:

  $('div#box').on("mouseenter mouseleave", "p#moreinfo", function(e){...

where p#moreinfo is the thing inside template I want a hover effect on (I changed that compared with my initiate example).