JavaScript运行时错误:对象不支持“打开"属性或方法 [英] JavaScript runtime error: Object doesn't support property or method 'on'
本文介绍了JavaScript运行时错误:对象不支持“打开"属性或方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我收到错误消息对象不支持属性或方法'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();
});
解决方案
您正在使用真正的旧版jQuery(2011年2月):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
此版本早于.on方法(已添加v1.7).使用更现代的jQuery版本或绑定版本1.5中可用的更改事件的方法.
这可能很简单:
$('#<%=filBrowse.ClientID%>').change(function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
但是，我真的会考虑使用jQuery的较新版本.
I am getting error message "Object doesn't support property or method 'on'". I think it is to do with this in my script.
$('#<%=filBrowse.ClientID%>').on('change', function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
Page script
<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>
Script Sent to Browser
$('#photoUploadCoor_filBrowse').on('change', function () {
$('#photoUploadCoor_btnSaveImage').click();
});
解决方案
You're using a 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). Use a more modern version of jQuery, or a method for binding change events available in version 1.5.
This could be as simple as:
$('#<%=filBrowse.ClientID%>').change(function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
But, I would really consider a newer version of jQuery.
这篇关于JavaScript运行时错误:对象不支持“打开"属性或方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
