Flip
Flip

Reputation: 6781

Changes I make with JQuery only work temporarily

JQuery isn't behaving the way I expect it to behave. The following code only makes the h1-tag disappear for about a second before it reappears. I have no idea what I am doing wrong and would appreciate any help. The code is a Rails-View. If you need more context let me know what you need. Any help is high welcome..

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

Upvotes: 0

Views: 44

Answers (1)

adeneo
adeneo

Reputation: 318372

Try preventing the default action

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

    e.preventDefault();

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

Upvotes: 1

Related Questions