JavaScript 运行时错误 : Object doesn't support property or method 'on'

Question

我收到错误消息“对象不支持属性或方法‘on’”。我认为这与我的脚本中的此有关。

    $('#<%=filBrowse.ClientID%>').on('change', function () {
                    $('#<%=btnSaveImage.ClientID%>').click();
                 });

---

页面脚本

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
        <link href="scripts/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />


        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <table>
                <tr>
                    <td>
                        <asp:UpdatePanel ID="UpdatePanelCanvass" runat="server" UpdateMode="conditional">
                            <ContentTemplate>

                                <asp:Panel ID="panelCanvass" Visible="false" runat="server">
                                   <div class="helpbox-overlay"></div>
                                    <div class="helpbox">
                                        <div class="helpbox-popup-canvass">
                                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                    <td>
                                                        <h2>Crop Image</h2>
                                                    </td>
                                                    <td align="right">
                                                        <asp:ImageButton ID="btnClose" CausesValidation="false" ImageUrl="~/images/icons/red-cross.png" runat="server" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center">
                                                        <asp:Image ID="imgCanvass"  runat="server"  Width="300" Height="300" />

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center">
                                                        <asp:Button ID="btnCrop" runat="server" Text="Done Cropping" CausesValidation="false" />
                                                    </td>
                                                </tr>

                                            </table>
                                        </div>
                                    </div>

                                </asp:Panel>
                                <table>
                                    <tr>
                                        <td colspan="2">
                                           <img id="imgPreview" runat="server" alt="Photo" class="photo" width="120" height="120"  /><br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="fileUpload">
                                                <asp:Button ID="btnSaveImage" runat="server" Text="Browse" CausesValidation="false" />
                                                <asp:FileUpload ID="filBrowse" runat="server" Width="80" class="upload"  />
                                            </div>
                                        </td>
                                        <td align="right">
                                            <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?');" />
                                        </td>
                                    </tr>
                                </table>
                            <asp:HiddenField ID="hfX" runat="server" />
                            <asp:HiddenField ID="hfY" runat="server" />
                            <asp:HiddenField ID="hfHeight" runat="server" />
                            <asp:HiddenField ID="hfWidth" runat="server" />
                            </ContentTemplate>
                            <Triggers>
                                <asp:PostBackTrigger ControlID="btnSaveImage" />
                                <asp:PostBackTrigger ControlID="btnCrop" />
                                <asp:PostBackTrigger ControlID="btnClose" />
                                <asp:PostBackTrigger ControlID="btnRemove" />
                            </Triggers>                  
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>

        </div>

        <style>
            .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;
            }
        </style>

        <script type="text/javascript">

            $(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 () {

                $('#<%=filBrowse.ClientID%>').on('change', function () {
                    $('#<%=btnSaveImage.ClientID%>').click();
                 });

            });



        </script>

发送到浏览器的脚本

       $('#photoUploadCoor_filBrowse').on('change', function () {
                    $('#photoUploadCoor_btnSaveImage').click();
                 });

Answer 1

您正在使用 really old version of jQuery (Feb 2011) :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

This version pre-dates the .on method (Added v1.7) .使用更现代的 jQuery 版本，or a method for binding change events available in version 1.5 .

这可以很简单:

$('#<%=filBrowse.ClientID%>').change(function () {
            $('#<%=btnSaveImage.ClientID%>').click();
});

但是，我真的会考虑更新版本的 jQuery。