Javascriptコードは、上記のコードを述べ</p> <pre><code><div id="app-back-button"> <%= link_to image_tag("back.png",:border => 0), 'javascript:history.go(-1);' %> </div> </code></pre> <p>index.html.erbレール

Question

では正常に動作していないと、アクションをバックトリガします。

index.html.erb

下記のコードを非表示にし、divの内容を表示するために使用されます。

<a href="#">LINK</a> 

<div id = "test"> 

    <h2>Import Statements</h2> 

    <%= form_tag import_xvaziris_path, multipart: true do %> 
    <%= file_field_tag :file %> 
    <%= submit_tag "Import" %> 
    <% end %> 

</div> 


<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $("div#test").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div#test").toggle(); 
    }); 
}); 
</script> 

ここで問題は、戻るボタンをクリックすると、非表示機能が起動され、後方に移動しないという問題です。

ご提案は大歓迎です。

ありがとうございます。

フルインデックスビューは以下のとおりです。あなたがそうするからそれを妨げているので、それは "バック" はないだろう

index.html.erb

<div id="content_header"> 
    <h1 id="main_heading">XTEP Vaziri Statement</h1> 

    <div id="app-back-button"> 
     <%= link_to image_tag("back.png",:border => 0), 'javascript:history.go(-1);' %> 
    </div> 

</div> 

<br> 

<a href="#">...</a> 

<div id = "test"> 

    <h2>Import Statements</h2> 

    <%= form_tag import_xvaziris_path, multipart: true do %> 
    <%= file_field_tag :file %> 
    <%= submit_tag "Import" %> 
    <% end %> 

</div> 


<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $("div#test").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div#test").toggle(); 
    }); 
}); 
</script> 

Answer 1

@WesFosterが理由を説明しました。しかし、preventDefault()を削除すると、それでもあなたのdivが「トグル」されます。あなたのページは戻ってきます。これは、ページ上のすべてのアンカータグを選択しているためです。

より良い方法は、特定のトグルリンクを選択して、その特定の要素にトグル機能を追加することです。

$(document).ready(function() { 
 
    $("div#test").hide(); 
 

 
    $("a.form-toggle-link").click(function(event) { 
 
    event.preventDefault(); 
 
    $("div#test").toggle(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" class="form-toggle-link">LINK</a> 
 

 
<div id="test"> 
 
    <h2>Import Statements</h2> 
 
    ... 
 
</div> 
 

 
<div id="app-back-button"> 
 
    <a href="javascript:history.go(-1);">Another link</a> 
 
</div>

---

全index.html.erb：

<div id="content_header"> 
    <h1 id="main_heading">XTEP Vaziri Statement</h1> 
    <div id="app-back-button"> 
    <%=link_to image_tag("back.png", :border=>0), 'javascript:history.go(-1);' %> 
    </div> 
</div> 

<br> 

<!--   |=== HERE --> 
<a href="#" class="toggle-form">...</a> 

<div id="test"> 
    <h2>Import Statements</h2> 
    <%=f orm_tag import_xvaziris_path, multipart: true do %> 
    <%=f ile_field_tag :file %> 
    <%=s ubmit_tag "Import" %> 
    <% end %> 
</div> 


<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
    $("div#test").hide(); 

    // | === HERE 
    $("a.toggle-form").click(function(event) { 
     event.preventDefault(); 
     $("div#test").toggle(); 
    }); 
    }); 
</script> 

Answer 2

：

# This prevents the link from executing 
event.preventDefault(); 

したがって、javascript:history.go(-1);が実行されていません。

を削除すると、意図したとおりに「戻る」ことができます。