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

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — 76484, Jul 12 '16 at 23:09
fashion in sending not-subject-based links? this is about handlebars which is pretty much another topic — Hans Pede, Jul 13 '16 at 02:22
It's not about Handlebars. It's about event binding to dynamically added HTML. Your issue is that the `#a1` element does not exist at the time you are trying to bind to it. [Event Delegation](https://learn.jquery.com/events/event-delegation/) is how to solve it. — 76484, Jul 13 '16 at 02:47
Oops. I didn't see that you are applying a jQuery plugin to the dynamically created element. Event delegation won't work. You will need to either apply the plugin to an element that exists on page load (and into which you would render the template) or invoke the plugin method _after_ your template has rendered. — 76484, Jul 13 '16 at 04:03
It is kind of beyond my intellectual scope. Is it possible you can give a simple example in the above ? I don't like to touch the page where data is loaded into JSON (the site behind the scenes). — Hans Pede, Jul 13 '16 at 12:47
Can you share the code that renders the template and tell us when this code gets called? — 76484, Jul 14 '16 at 02:48

score 0 · Accepted Answer · answered Jul 15 '16 at 15:23

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

hover effect in handlebars

1 Answers1