JQuery isn't recognising a #id selector, seems to be dependent on the URL
<p>I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.</p>

<pre><code>&lt;script&gt;
  $(document).ready(function() {
    $("#select_mailshot").click(function () {
      alert('mailshot');
      document.location.href = "/products/1";
    });
    $("#select_blog").click(function () {
      alert('blog');
      document.location.href = "/messages";
    });
    $("#select_contact").click(function () {
      alert('contact');
      document.location.href = "/contacts/1";
    });
  });
&lt;/script&gt;
</code></pre>

<p>(the alert steps are in there for debugging)</p>

<p>The following html code in index.html.erb</p>

<pre><code>&lt;ul&gt;
  &lt;li id="select_mailshot"&gt;Mailshot&lt;/li&gt;
  &lt;li id="select_blog"&gt;Blog&lt;/li&gt;
  &lt;li id="select_contact"&gt;Contact us&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The intention is that this effectively creates 3 buttons.</p>

<p>When clicking on any button from <a href="http://myurl.com/" rel="nofollow">http://myurl.com/</a> it all works.</p>

<p>When clicking on any button from <a href="http://myurl.com/messages" rel="nofollow">http://myurl.com/messages</a> (get to this via the middle button) it all works</p>

<p>When starting from <a href="http://myurl.com/products/1" rel="nofollow">http://myurl.com/products/1</a> it all stops working (the alerts do not trigger). In fact when starting from <a href="http://myurl.com/anything/id" rel="nofollow">http://myurl.com/anything/id</a> it stops working.</p>

<p>I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.</p>

<p>Can anyone shed any light as to what's going on here?</p>
