我用JQuery做的更改只能暂时运行

Question

JQuery的行为方式并不像我期望的那样。以下代码仅使h1-tag在重新出现之前消失约一秒钟。我不知道我做错了什么，并希望得到任何帮助。代码是Rails-View。如果您需要更多上下文，请告诉我您的需求。欢迎任何帮助..

<% provide(:title, 'Home') %>


<div class="center jumbotron">

  <h1 class="question_answer"></h1>
  <br>
  <br>
  <%= link_to "Show answer", '#', class: "btn btn-lg btn-primary", 
                                                                id: "show" %>
  <%= link_to "Next question", '#', class: "btn btn-lg btn-primary", 
                                                                id: "next" %>
</div>

<%= link_to "Back", home_user_path(@user), 
                    class: "btn btn-sm btn-primary" %>


<%= javascript_tag do %>    

$(document).ready(function() {

    var
    JsVocabs = <%= raw @vocabs.to_json %>,
    n = 0; 

    $('#next').hide();
    $('h1').text(JsVocabs[n].front);

    $('#show').on('click', function() {
        $('h1').toggle();
    });
});

<% end %>

Answer 1

尝试阻止默认操作

$('#show').on('click', function(e) {

    e.preventDefault();

    $('h1').toggle();
});