[Rails]リロードしないと投稿できないちょっとした不具合

Railsの学習中で、作った料理のレシピを共有するサイトを作成している時、
投稿画面でリロードしないとどこを押しても何も反応しないという現象が起きた。

原因は至極単純なものだったが、恥ずかしながら解決に時間がかかってしまったため備忘録として残しておく。

現象

投稿画面に遷移したあと、フォームへの入力はできるが、
submitボタンを押しても何も起こらない。DBへの保存もできてない模様。
リロードをして再度記入、submitで投稿可能。

原因

form_with（今回はnested_form_for）をdiv要素を跨いで書いてしまっていた。

_rescipe_form.html.erb

    <div class="row">
     <%= nested_form_for recipe, local: true do |f| %>
      <div class="col-lg-4">
        <h5>料理の写真</h5>
        <%= attachment_image_tag recipe, :recipe_image, fallback: "no_image.png", class: "img_prev", style: "height: 250px; width:300px;" %><br>
        <%= f.attachment_field :recipe_image %>
      </div>

         ~~~~~~(省略)~~~~~~~

      <% if recipe.new_record? %>
        <%= f.submit 'レシピを公開する'%>
      <% else %>
        <%= f.submit 'レシピを書き換える' %>
      <% end %>
     </div>
    <% end %> 

まとめ

初歩的なところで躓き時間を使ってしまった。
この現象が起きた時、formの中身ばかりを見ていたので
入れ子構造がちゃんとなっているか、全体をよくみる癖を付けたい