jquery - JQuery 和 Backbone.js on Rails 3 的问题

Question

我在 js 文件(不是主干)中有以下代码，除悬停事件外，其余文件 jQuery 命令都可以工作:

$ ->
        $("#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"

这是一个 Backbone 使用的 ECO 模板，其中包含要悬停的元素和要显示的元素:

<% 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 %>

和 peche 的 css:

.peche{display:none;}

为什么这个悬停事件不起作用？上面的生态模板是我的 Backbone 应用程序的一部分，而我使用的 js 文件只是在 javascripts/文件夹中。这不应该工作吗？我使用常规 html 而不是 .eco 在 JSFiddle 上工作。

Answer 1

我不确定，因为我想我没有看到你所有的代码，但是当使用主干时你有模板并且你也使用主干在 View 上编写事件，在这种情况下，我不确定如果您正在使用主干，因为它看起来像一个标准的 Rails View 。

但是假设它是一个主干 View ，并且您正在避免编写主干事件，而是必须为事件编写纯 jquery 代码，请使用 jQuery 的“实时”事件，这样所有生成的新动态 View 都将在没有任何内容的情况下执行问题。

因此尝试将您的代码更新为类似

    $ ->
      $("#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"