jQueryのクリックイベントを作成したが、処理が実行されない

Question

#実現したいこと
RailsでjQueryの動作確認
・erbファイルにデフォルトの文章、テキストボックス、ボタンを設置し、
テキストボックスに何かしら文章を入力しボタンを押したら、
デフォルトの文章がその文章に置き換わる

実行したソースコード

<p id="string">デフォルトの文章</p>
<input type="text" id="text" placeholder="変更する文章">
<button id="button">変更する</button>

//common.js
$("#button").on("click", function(){ 
    var newText = $("#text").val();　//ここにブレークポイントを設置するも反応なし
    $("#string").text(newText);
});

現状

・テキストボックスに文章を入力し、ボタンを押しても、文章が置き換わらない
・chromeのデベロッパーツールで、該当のfunctionにブレークポイントを置いても、そこをそもそも処理が通過しない（一時停止状態にならない）

気になる点

・jsファイルは、common.jsというファイル名で作成したが、
デベロッパーツール＞Sources>assets　を開くと、ファイル名がcommon.self-~~~~~~body=1　というものになっている
・application.jsの記載を以下のようにしているが、正しいのかが分からない
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

common.jsには、他にも$(document).ready(function() を記述しており、
そちらは画面表示時に動作しているため、「common.jsがそもそも読み込まれていない」ことは無い、と考えています。

知見がおありの方、ご回答いただけますと大変ありがたいです。宜しくお願いいたします。

Comments

[x_x]

common.js 全体を挙げてもらえるでしょうか？

[YO14]

x_xさん
以下になります。
$(document).ready(function() {
$("p#statuscheck").text("jQuery稼働テスト(稼働中)");
});

$("#button").on("click", function(){
var newText = $("#text").val();
$("#string").text(newText);
});

[x_x]

やはりそうでしたか。
すべて $(document).ready(function() { ～ }); 内に入れるとどうなりますか？

[YO14]

$(document).ready(function() {
$("p#statuscheck").text("jQuery稼働テスト(稼働中)");

$("#button").on("click", function(){
var newText = $("#text").val();
$("#string").text(newText);
});
});

としたことで、ボタン押下によるテキスト置き換えができるようになりました。
Railsどうこうというより、jQueryの質問になってしまいますが、
$(document).ready(function(){
の中に、clickイベントなどは記述するものなのでしょうか。
$(document)~~~は、「ブラウザでページを読み込んだ時に準備するイベント」を記載するものだと思っていて、
clickイベントなどはページ表示後の画面操作なので、外に書くものだと思っていました。
この認識は誤りでしょうか。

[x_x]

<script> が #button 出現後に書かれていれば外でも問題ないです。

Answer 1

頻出する問題ですが一応回答を書いておきます。
id="button" が出現する前に書かれているため動いていないだけです。$(function() { ～ }); でドキュメント読み込み後に動くようにできます。

$(function() {
  // ここに書く。
});

https://api.jquery.com/jQuery/#jQuery3

Answer 2

普通にうごきますね
コンソールにエラーがでているか確認してください

Comments

[yambejp]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("#button").on("click", function(){
var newText = $("#text").val();
$("#string").text(newText);
});
});
</script>
<p id="string">デフォルトの文章</p>
<input type="text" id="text" placeholder="変更する文章" value="123">
<button id="button">変更する</button>

[YO14]

ご確認ありがとうございました。
特にコンソールでエラー表示は出ておりません。

ひとつ質問させていただきたいのですが、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
↑こちらは、erbファイル(application.html.erb?)の先頭に記述が必要なのでしょうか。

application.jsに
//= require jquery
//= require jquery_ujs
//= require_tree .
と記載したことで、jQueryが読み込まれるのだと思っているのですが・・・。

[yambejp]

erbはjQueryを読んでるはずです。
回答はhtmlベースで行うための処理です。
ブラウザの開発ページでjQueryが読まれているかどうかは判断つくでしょう