Javascript代码无法在Rails中正常工作

Question

index.html.erb

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

Above mentioned code triggers back action when back button is clicked.

index.html.erb

Below mentioned code is used to hide and show the div contents.

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

Now the problem is that when I click the back button, it triggers hide/show functionality and do not go backwards.

Any suggestions are most welcome.

Thank you in advance.

Full index view is as below;

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 has explained you the reason. But, if you remove the preventDefault() , it would still be "toggling" your div . Even though your page goes back. That's because you are selecting ALL anchor tags on your page.

A better way would be to select specific toggle link and add toggle functionality to that specific element.

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

---

Full 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

It's not going "back" because you have prevented it from doing so:

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

Therefore, the javascript:history.go(-1); is not executing.

Remove the preventDefault() and it will allow you to go "back" as intended.