2017-10-05 2 views
0

をトグルしていない、私はすぐに私のWebページを参照してくださいショー切り替えるとテキストフィールドの非表示にすることができます。のCoffeeScriptは私のdiv

フォームフィールドボタンをクリックすると、テキストフィールドが表示されたままになります。

私はshow()にtoggle()を変更しようとしましたが、という名前のテキストフィールドが表示されないところで同じことが起こります。

# app/views/forms/form.html.erb 
<%= link_to 'Form Link', '#', class: 'form-link' %> 
<div class="form-group"> 
    <div class="col-sm-1"><%= form.label :name, class: 'control-label' %></div> 
    <div class="col-sm-1"><%= form.text_field :name, class: 'form-control' %></div> 
</div> 

# app/assets/stylesheets/forms.scss 
.form-group { 
    display: none; 
} 

# app/assets/javascripts/forms.coffee 
$(document).on 'turbolinks:click', ('.form-link'), -> 
    $('.form-group').toggle() 

答えて

1

あなたは、単にリンクがクリックされたdiv要素の可視性を切り替えたい場合は、あなたは、単にリンクのクリックに耳を傾け、リロードしないことturbolinksを確保するために、デフォルトの動作を阻止することができるはずですページ。 これはあなたが見ている問題を解決するはずです。リンクをクリックすると、スクリプトにフォームが表示されますが、ターボリンクがリンクをたどっています(これは#で、ページをリロードするだけです)。例えば

$(document).on 'click', '.form-link', (e) -> 
    e.preventDefault() # prevent link from being followed 
    $('.form-group').toggle() 

あなたがここでそれを試すことができます:https://jsfiddle.net/u9hngeo4/1/

関連する問題