title: JavaScript runtime error: Object doesn't support property or method 'on'
body: <p>I am getting error message "Object doesn't support property or method 'on'". I think it is to do with this in my script.</p>
  
  <pre><code>    $('#&lt;%=filBrowse.ClientID%&gt;').on('change', function () {
                      $('#&lt;%=btnSaveImage.ClientID%&gt;').click();
                   });
  </code></pre>
  
  <hr>
  
  <p><strong>Page script</strong>
              </p>
  
  <pre><code>        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/jquery.Jcrop.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;link href="scripts/jquery.Jcrop.css" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="StyleSheet.css" rel="stylesheet" type="text/css" /&gt;
  
  
          &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt;
          &lt;div&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;asp:UpdatePanel ID="UpdatePanelCanvass" runat="server" UpdateMode="conditional"&gt;
                              &lt;ContentTemplate&gt;
  
                                  &lt;asp:Panel ID="panelCanvass" Visible="false" runat="server"&gt;
                                     &lt;div class="helpbox-overlay"&gt;&lt;/div&gt;
                                      &lt;div class="helpbox"&gt;
                                          &lt;div class="helpbox-popup-canvass"&gt;
                                              &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;
                                                          &lt;h2&gt;Crop Image&lt;/h2&gt;
                                                      &lt;/td&gt;
                                                      &lt;td align="right"&gt;
                                                          &lt;asp:ImageButton ID="btnClose" CausesValidation="false" ImageUrl="~/images/icons/red-cross.png" runat="server" /&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;tr&gt;
                                                      &lt;td align="center"&gt;
                                                          &lt;asp:Image ID="imgCanvass"  runat="server"  Width="300" Height="300" /&gt;
  
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;tr&gt;
                                                      &lt;td align="center"&gt;
                                                          &lt;asp:Button ID="btnCrop" runat="server" Text="Done Cropping" CausesValidation="false" /&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
  
                                              &lt;/table&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                  &lt;/asp:Panel&gt;
                                  &lt;table&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2"&gt;
                                             &lt;img id="imgPreview" runat="server" alt="Photo" class="photo" width="120" height="120"  /&gt;&lt;br /&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;
                                              &lt;div class="fileUpload"&gt;
                                                  &lt;asp:Button ID="btnSaveImage" runat="server" Text="Browse" CausesValidation="false" /&gt;
                                                  &lt;asp:FileUpload ID="filBrowse" runat="server" Width="80" class="upload"  /&gt;
                                              &lt;/div&gt;
                                          &lt;/td&gt;
                                          &lt;td align="right"&gt;
                                              &lt;asp:Button ID="btnRemove" runat="server" Text="Remove" ToolTip="Remove image" CausesValidation="false"
                                                  OnClientClick="javascript: return confirm('Are you sure you want to remove this image?');" /&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;asp:HiddenField ID="hfX" runat="server" /&gt;
                              &lt;asp:HiddenField ID="hfY" runat="server" /&gt;
                              &lt;asp:HiddenField ID="hfHeight" runat="server" /&gt;
                              &lt;asp:HiddenField ID="hfWidth" runat="server" /&gt;
                              &lt;/ContentTemplate&gt;
                              &lt;Triggers&gt;
                                  &lt;asp:PostBackTrigger ControlID="btnSaveImage" /&gt;
                                  &lt;asp:PostBackTrigger ControlID="btnCrop" /&gt;
                                  &lt;asp:PostBackTrigger ControlID="btnClose" /&gt;
                                  &lt;asp:PostBackTrigger ControlID="btnRemove" /&gt;
                              &lt;/Triggers&gt;                  
                          &lt;/asp:UpdatePanel&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
  
          &lt;style&gt;
              .fileUpload {
                  position: relative;
                  overflow: hidden;
                  /*margin: 10px;*/
              }
  
                  .fileUpload input.upload {
                      position: absolute;
                      top: 0;
                      right: 0;
                      left: 0;
                      margin: 0;
                      padding: 0;
                      font-size: 18px;
                      cursor: pointer;
                      opacity: 0;
                      filter: alpha(opacity=0);
                  }
  
              .imageCanvass {
                  border: 1px solid #808080;
                  max-height: 300px;
                  max-width: 300px;
              }
          &lt;/style&gt;
  
          &lt;script type="text/javascript"&gt;
  
              $(function () {
                  $('#imgCanvass').Jcrop({
                      onSelect: updateCoords,
                      onChange: updateCoords
                  });
              });
              function updateCoords(c) {
                  $('#hfX').val(c.x);
                  $('#hfY').val(c.y);
                  $('#hfHeight').val(c.h);
                  $('#hfWidth').val(c.w);
              }
  
  
              $(document).ready(function () {
  
                  $('#&lt;%=filBrowse.ClientID%&gt;').on('change', function () {
                      $('#&lt;%=btnSaveImage.ClientID%&gt;').click();
                   });
  
              });
  
  
  
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>Script Sent to Browser</strong></p>
  
  <pre><code>       $('#photoUploadCoor_filBrowse').on('change', function () {
                      $('#photoUploadCoor_btnSaveImage').click();
                   });
  </code></pre>