title: jQuery Plugin not working in ASP.NET MVC 4
body: <p>The images which should be cycling are just sitting on top of each other. Screenshot <a href="http://tinypic.com/r/343n0io/6" rel="nofollow">here</a></p>
  
  <p>In my (very simple) application I have one <code>View</code> named <code>Index.cshtml</code>. I'd like to use <a href="http://www.malsup.com/jquery/cycle/" rel="nofollow">jquery Cycle Plugin</a> for this page which I have used in my PHP apps too. Below is my <code>_Layout.cshtml</code>'s relevant code</p>
  
  <pre><code>    @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render(Url.Content("~/Scripts/cycle.js")) // I added this line.
      @Scripts.Render("~/bundles/modernizr")
  </code></pre>
  
  <p>The plugin file <code>(cycle.js)</code> is in <code>Scripts</code> folder generated by Basic project layout.
  Below is how I am using it. The following code is also in <code>_Layout.cshtml</code> (comments only here). </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          alert('test1');   //this is 'alerted'
          $('.images').cycle({
              fx: 'fade',
              speed: 2000
          });
          alert('test2!'); //this is NOT 'alerted'
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I view the source after requesting page in a browser, I get this : </p>
  
  <pre><code>&lt;title&gt;Asp.Net MVC 4 Hello World App&lt;/title&gt;
  &lt;link href="/Content/site.css" rel="stylesheet"/&gt;
  &lt;script src="/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/cycle.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/modernizr-2.5.3.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          alert('test1'); 
          $('.images').cycle({
              fx: 'fade',
              speed: 2000
          });
          alert('test12');
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  ...
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the container for images:</p>
  
  <pre><code>        &lt;div class="images" id="images"&gt;
              &lt;img src="@Url.Content("../Images/image1.jpg")" alt="page image" /&gt;
              &lt;img src="@Url.Content("../Images/image2.jpg")" alt="page image" /&gt;
              &lt;img src="@Url.Content("../Images/image3.jpg")" alt="page image" /&gt;
              &lt;img src="@Url.Content("../Images/image4.jpg")" alt="page image" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The files are therefore successfully being loaded. I believe the issue is how <code>$(document).ready()</code> works. because whatever code I put before <code>.cycle()</code> works but nothing works after it.</p>