jqueryが一瞬しか表示されない

Question

プルダウンで選択した値を、隣のテキストフォームに表示させたいのですが、
プルダウンから選択した一瞬だけしかフォームに表示されず、
すぐにフォームから消えてしまいます。
調べてみるとbuttonのtypeを指定していないためsubmit扱いとなり、一瞬しか表示されない、という記事はいくつか発見したのですが、今のコードではbuttonのtypeにbuttonを指定しているため原因がわからずにいます。
ご教示いただけませんでしょうか。

【ビュー】
<div class="input-group" id="year">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			年
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li id="2017"><a href="#">2017</a></li>
			<li id="2018"><a href="#">2018</a></li>
			<li id="2019"><a href="#">2019</a></li>
		</ul>
	</span>
	<input type="text" class="form-control" readonly>
</div>

<div class="input-group" id="month">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			月
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<% (1..12).each do |month| %>
				<li id=<%= month %>><a href="#"><%= month %></a></li>
			<% end %>
		</ul>
	</span>
	<input type="text" class="form-control" readonly>
</div>

<script>
$(function(){
	$("#month li").click(function () {
		month = $(this).attr('id')
		$("#month input").val(month);
	});
	
	
	$("#year li").click(function () {
		year = $(this).attr('id')
		$("#year input").val(year);


	$.ajax({ //ajax通信で以下のことを行います
      url: '/approval_histories/search', //urlを指定
      type: 'GET', //メソッドを指定
      data: {
        			year: year,
        			month: month
    				}, 
      dataType: 'json' //データ形式を指定
    })
    	.done(function(data){ 
      	$(data).each(function(i, approval_history){ 
      		$('tbody').append('<tr>')
        	$('tbody tr').append('<td>' + approval_history.date + '</td>') 
      		$('tbody tr').append('<td>' + approval_history.previous_in_at + '</td>')
      		$('tbody tr').append('<td>' + approval_history.previous_out_at + '</td>')
      		$('tbody tr').append('<td>' + approval_history.in_at + '</td>')
      		$('tbody tr').append('<td>' + approval_history.out_at + '</td>')
      		$('tbody tr').append('<td>' + approval_history.applying_attendance_change_target.name + '</td>')
      		$('tbody tr').append('<td>' + approval_history.created_at + '</td>')
      		$('tbody tr').append('<tr>')
      	});
			})
	});
});
</script>

Comments

[x_x]

年のコードがダブってますが間違いですかね？

[awa]

すみません、ダブって貼っていました。
重複しているコードを削除しました。

[shinoharat]

li 要素の中にある a 要素を削除するとどうなりますか？

<li id="2017"><a href="#">2017</a></li>
↓
<li id="2017">2017</li>

[awa]

li要素の中のa要素を削除すると、一瞬ではなくちゃんと表示されるようになりました！
ありがとうございます。
リンクをクリックしたことでリンク先に飛んだ扱いになっているのが原因でしょうか・・・。
ただリンクではなくなったことで、ホバー時の色変えやカーソルの変更などが無くなってしまったので、
こちらはCSSで頑張ります。

一度リロードしないとjQueryは動かない問題が発生しているので、
そちらはまた別の質問で投げようかなと思っております。

[shinoharat]

おそらく turbolinks が原因なのだと思います。
以下の２つのうち、どちらかを試してみてください。
---------------------------------------------------------------
【修正案１】turbolinks を off にする

Gemfile 内の ↓ の行をコメントアウトする

gem 'turbolinks'
---------------------------------------------------------------
【修正案２】turbolinks に対応した方法で jQuery を書き直す

// 修正前
<script>
$(function(){
$("#month li").click(function () {
...(中略)...
});
});
</script>

↓　　↓　　↓

// 修正後
<script>
$(document).on('turbolinks:load', function(){
$("#month li").click(function () {
...(中略)...
});
});
</script>
---------------------------------------------------------------

[awa]

修正案1で解決できました！
ありがとうございます！

Answer 1

shinoharatさんの修正案1で解決できました