他のすべてが機能している場合、JavaScriptはページ上のIDで特定の要素を見つけることができません

JavaScriptを使用してIDで要素を検索するという奇妙な問題があります。選択が定義されていないため、関数は実行されません。同じページにある多くの人と同じ種類の定義があります。このIDの要素は1つだけです。また、周囲の段落にIDを割り当てると、問題なく機能します。したがって、問題は回避されます。しかし、私はその問題について非常に興味があります。関連するアイテムを表示しています。

このJavaScriptはRailsアプリケーションの一部であるため、application.jsを使用して外部ファイルとして含まれています。これは多くの機能を備えた大きなファイルであり、この1つのIDを参照する場合を除いてすべて機能します。そして、私が述べたように、私はこのページで他の多くのIDを同じ方法で問題なく選択します。

私はRubyMineを使用しており、問題に関連する競合やタイプミスがないかアプリケーション全体を検索しました。競合はなく、item_messageへの予想されるすべての参照が見つかります。item_messageは、JavaScriptが簡単に見つけられる他の参照とともにパーシャルに含まれています。含まれる前に構文エラーを検索しましたが、見つかりませんでした。ページとJavaScriptのアイテムを並べ替えましたが無駄になりました。なぜこれが機能しないのか、私にはわかりません。

オプションのクラスを使用して要素を非表示にしようとすると、それは機能しました。ただし、非表示にすべきではない他のアイテムも非表示にしました。

これは次のように機能します。

HTML：

  <p id="item_message_p">
  <input class="string optional form-control" placeholder="Message? (optional)" type="text" name="item[message]" id="item_message"></p>

JavaScript：

var item_message_p = $('#item_message_p');
select_item_spot_id.change(function () {
    var spot = $(this).val();
    if (spot != "") {
      $.getJSON('/spots', {spot: $(this).val()}, function (data) {
        if (data.name.toLowerCase() === 'sold') {
            item_message_p.hide();
        } else {
            item_message_p.show();
        }
      })
    }
});

var item_messageが未定義であるため、このようには機能しません。

HTML：

  <p>
  <input class="string optional form-control" placeholder="Message? (optional)" type="text" name="item[message]" id="item_message"></p>

JavaScript：

var item_message = $('#item_message');
select_item_spot_id.change(function () {
    var spot = $(this).val();
    if (spot != "") {
      $.getJSON('/spots', {spot: $(this).val()}, function (data) {
        if (data.name.toLowerCase() === 'sold') {
            item_message.hide();
        } else {
            item_message.show();
        }
      })
    }
});