1

ホバーイベントを除いて残りのファイルjQueryコマンドが機能するjsファイル（バックボーンではない）に次のコードがあります。

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

このホバーイベントが機能しないのはなぜですか? 上記の eco テンプレートはバックボーン アプリの一部ですが、使用している js ファイルは javascripts/ フォルダーにあります。これはうまくいかないのですか？.eco ではなく、通常の html を使用して 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 に答える