1

我在一个 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"

这是一个主干使用的 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;}

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

4

1 回答 1

1

我不确定，因为我认为我没有看到您的所有代码，但是当使用主干时，您有模板，并且您也使用主干在视图上编写事件，在这种情况下，我不确定您是否是使用主干，因为它看起来像一个标准的导轨视图。

但是假设它是一个主干视图，并且您避免编写主干事件，而是必须为事件编写纯 jquery 代码，请使用 jQuery 的“实时”事件，以便生成的所有新动态视图将毫无问题地执行。

所以尝试将您的代码更新为类似

    $ ->
      $("#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"
于 2012-12-05T09:27:23.047 回答