Question

I have the following code in a js file (not backbone) where the rest of the files jQuery commands work except the hover event:

$ ->
        $("#welcome").modal "show"
        $(".george").hover ->
                $(".peche").fadeIn(1000).css("display","inline-block")
                $(".peche").fadeOut(300).css("display","none")
        $("#yes").click ->
                $("#welcome").modal "hide"
                $("#prospective_user").modal "show"
        $("#no").click ->
                $("#welcome").modal "hide"
                $("#returning_user").modal "show"
        $("#back").click ->
                $("#prospective_user").modal "hide"
                $("#welcome").modal "show"
        $("#backto").click ->
                $("#returning_user").modal "hide"
                $("#welcome").modal "show"

Here is a backbone used ECO template with the elements to be hovered over and the elements to be displayed:

<% for post in @posts.models: %>

        <tr class="george"><td>
                <center><div class="postdata">
                <% if post.get('content').length > 140: %>
                        <%=post.get('content').substring(0, 140)+"\t\t"%>
                        ...<a href="show/<%= post.get('id') %>">see more</a>
                <% else: %>
                        <%= post.get('content') %>
                <% end %>
        <br></div></center>

<span class="peche"><center>
<a href="<%= post.get('id') %>/like" data-remote="true">Agree</a>
<a href="<%= post.get('id') %>/dislike" data-remote="true">Disagree</a>
<a href="voice/<%= post.get('id') %>">Voice</a>
<a href="show/<%= post.get('id') %>">Comment</a>
<a href="report/post/<%= post.get('id') %>">Report</a>
</center></span></td></tr>

<% end %>

and the css for peche:

.peche{display:none;}

Why isn’t this hover event working? The eco template above is part of my backbone app while the js file i’m using is just in the javascripts/ folder. Should’t this work? I had it working on JSFiddle using regular html and not .eco.

Answer 1

I’m not sure since I think I’m not seeing all your code, but when using backbone you have templates and you use backbone as well to write the events on the views, on this case, I’m not sure if you are using backbone since it looks like an standard rails view.

But assuming that its a backbone view and that you are avoiding writting backbone events and instead you have to write plain jquery code for the events, use the “live” event of jQuery so all the new dynamic views generated will execute without any problems.

So try to update your code to something like

    $ ->
      $("#welcome").modal "show"
      $(".george").live "hover", ->
        $(".peche").fadeIn(1000).css("display","inline-block")
        $(".peche").fadeOut(300).css("display","none")
      $("#yes").live "click" ->
        $("#welcome").modal "hide"
        $("#prospective_user").modal "show"
      $("#no").live "click" ->
        $("#welcome").modal "hide"
        $("#returning_user").modal "show"
      $("#back").live "click" ->
        $("#prospective_user").modal "hide"
        $("#welcome").modal "show"
      $("#backto").live "click" ->
        $("#returning_user").modal "hide"
        $("#welcome").modal "show"