title: jQuery not working with runat="server"
body: <p>My below code is working fine when used in HTML. The same code I tried to place it inside a form and it stopped working. How to fix this issue?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;script src="jquery-1.7.1.min.js" &gt;&lt;/script&gt;
  &lt;title&gt;Chat scroll test&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #chat
  {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      overflow-y: auto;
  }
  &lt;/style&gt;
  &lt;script&gt;
      jQuery(document).ready(function ($) {
          monitor = function () {
              var $this = $(this),
          wrap = $this.find('.wrapper'),
          height = $this.height(),
          maxScroll = wrap.height() - height,
          top = $this.scrollTop();
              if (maxScroll === top) {
                  $this.addClass('atBottom');
              } else {
                  $this.removeClass('atBottom');
              }
          }
          window.setInterval(function () {
              monitor.call($('#chat').get(0));
          }, 350);
          $('#chat').bind('addMessage', function (e, message) {
              var $this = $(this),
          top = $this.scrollTop(),
          scroll = $this.hasClass('atBottom');
              $this.find('.wrapper').append(message);
              if (scroll) {
                  var wrap = $this.find('.wrapper'),
              height = $this.height(),
              maxScroll = wrap.height() - height
                  $this.scrollTop(maxScroll);
              }
          })
          $('button').click(function () {
              $('#chat').trigger('addMessage', 'asdgagasdg&lt;br/&gt;');
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div id="chat"&gt;
      &lt;div class="wrapper"&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          asd&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
          adsgasgda&lt;br/&gt;
          adsgasg&lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button&gt;Add a line&lt;/button&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When form tag is removed it again starts back to work.</p>