Hans Pede Hans Pede - 4 months ago 8
Ajax Question

hover effect in handlebars

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

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).