按鈕事件未在javascript中觸發
[英]Button event not firing in javascript
問題描述
我添加了一個jquery模式彈出窗口來保存特定設備的上傳文件。 彈出模式，取消按鈕工作，但我無法弄清楚如何讓保存按鈕激活onclick事件...
這就是我所做的：
$(function () {
$("#dialogCustUploads").dialog("destroy");
$("#dialogCustUploads").dialog({
title: "Upload Files",
autoOpen: false,
modal: true,
resizable: false,
width: 'auto',
buttons: {
Save: function () {
$(document.getElementById('<%=btnSave.ClientID %>')).click();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
function showCustUploads() {
$(function () {
$("#dialogCustUploads").dialog("open");
});
$(".dialogCustUploads").parent().appendTo($("form:first"));
}
<div id="dialogCustUploads" style="display: none">
<table style="width:100%;">
<tr>
<td class="auto-style1">
<asp:Label ID="Label16" runat="server" Text="Client"></asp:Label>
</td>
<td>
<asp:Label ID="lblClientUploadName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label19" runat="server" Text="Certificate no" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label14" runat="server" Text="Upload Option"></asp:Label>
</td>
<td>
<asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style1">
<asp:Label ID="Label18" runat="server" Text="File"></asp:Label>
</td>
<td>
<asp:FileUpload ID="fuPath" runat="server" Width="408px" />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style1"></td>
<td>
<asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" BackColor="White" />
</td>
</tr>
</table>
</div>
我不確定我錯過了什么或做錯了...這是我第一次使用javascript ...任何幫助將不勝感激!!!! 保存按鈕什么都不做......
編輯
謝謝大家的幫助！ 我更新了我的按鈕以刪除內聯樣式：
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static" />
我已經嘗試使用您提供給我的以下內容：
1. $("#<%=btnSave.ClientID%>").click();
2. document.getElementById('<%=btnSave.ClientID %>').click();
3. <asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static" BackColor="White" />
document.getElementById('btnSave').click();
4. $('<%=btnSave.ClientID %>').trigger("click");
但他們都給我一個錯誤信息，上面寫着：
Microsoft JScript runtime error: 'btnSave_Click' is undefined
當表單中斷按鈕時，內容如下：
<input type="submit" name="ctl00$MainContent$btnSave" value="Save" onclick="btnSave_Click;" id="btnSave" />
我正在做什么還有什么不對嗎？
編輯
這是我的源代碼：
<script type="text/javascript">
$(function () {
$("#dialog").dialog("destroy");
$("#dialog").dialog({
title: "Message",
autoOpen: false,
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
function showMessage() {
$(function () {
$("#dialog").dialog("open");
});
return false;
}
$(function () {
$("#dialogCustUploads").dialog("destroy");
$("#dialogCustUploads").dialog({
title: "Upload Files",
autoOpen: false,
modal: true,
resizable: false,
width: 'auto',
buttons: {
Save: function () {
document.getElementById('<%=btnSave.ClientID %>').click();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
function showCustUploads() {
$(function () {
$("#dialogCustUploads").dialog("open");
});
$(".dialogCustUploads").parent().appendTo($("form:first"));
}
</script>
我的div所在的按鈕點擊事件：
<div id="dialogCustUploads" style="display: none">
<table style="width:100%;">
<tr>
<td class="auto-style1">
<asp:Label ID="Label16" runat="server" Text="Client"></asp:Label>
</td>
<td>
<asp:Label ID="lblClientUploadName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label19" runat="server" Text="Certificate no" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label14" runat="server" Text="Upload Option"></asp:Label>
</td>
<td>
<asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style1">
<asp:Label ID="Label18" runat="server" Text="File"></asp:Label>
</td>
<td>
<asp:FileUpload ID="fuPath" runat="server" Width="408px" />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style1"></td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</td>
</tr>
</table>
</div>
我通過gridview中的單擊調用模態彈出窗口：
<asp:GridView ID="gvDeviceCalibration" runat="server" CellPadding="10" Width="90%" AutoGenerateColumns="False" BorderWidth="1px">
<HeaderStyle BackColor="#3A4F63" BorderWidth="1px" Font-Size="7pt" Wrap="False" ForeColor="White" />
<RowStyle BackColor="White" Wrap="True" />
<AlternatingRowStyle BackColor="#FFCC99" Wrap="True" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" ></asp:BoundField>
<asp:BoundField DataField="InstrumentType" HeaderText="Instrument Type" ReadOnly="True" SortExpression="InstrumentType"> <HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="Make" HeaderText="Make" ReadOnly="True" SortExpression="Make">
<HeaderStyle Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="Location" HeaderText="Location" ReadOnly="True" SortExpression="Location"></asp:BoundField>
<asp:BoundField DataField="SubLocation" HeaderText="Sub Location" ReadOnly="True" SortExpression="Sub Location"> <HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="CalibrationIntervals" HeaderText="Calibration Intervals" ReadOnly="True" SortExpression="CalibrationIntervals"> <HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="SerialNo" HeaderText="Serial No" ReadOnly="True" SortExpression="SerialNo"> <HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="WorkingRange" HeaderText="Working Range" ReadOnly="True" SortExpression="WorkingRange"> <HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="Classification" HeaderText="Classification" ReadOnly="True" SortExpression="Classification"></asp:BoundField>
<asp:BoundField DataField="CalibrationDate" HeaderText="Calibration Date" DataFormatString="{0:yyyy/MM/dd}" ReadOnly="True" SortExpression="CalibrationDate">
<HeaderStyle Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="CalibrationHouse" HeaderText="Calibration House" ReadOnly="True" SortExpression="CalibrationHouse"><HeaderStyle Wrap="True" /></asp:BoundField>
<asp:BoundField DataField="Owner1s" HeaderText="Owner 1" ReadOnly="True" SortExpression="Owner1s"></asp:BoundField>
<asp:BoundField DataField="Owners2" HeaderText="Owner 2" ReadOnly="True" SortExpression="Owners2"></asp:BoundField>
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" ReadOnly="True" SortExpression="CreatedBy"></asp:BoundField>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:ImageButton ID="UpdateStatus" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
ImageUrl="~/Images/Sign-Select-icon.png" OnClick="SelectCalDevice_Click" Width="22" /><%-- --%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Upload">
<ItemTemplate>
<asp:ImageButton ID="CustUploadFiles" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
ImageUrl="~/Images/UploadFilesTrans.png" OnClick="SelectCustFiles_Click" Width="22" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="View ">
<ItemTemplate>
<asp:ImageButton ID="CustViewFiles" runat="server" Height="25" BorderStyle="None" BackColor="Transparent"
ImageUrl="~/Images/msgicon.png" ForeColor="Transparent" Width="25" OnClick="ViewCustFiles_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<HeaderTemplate>There are no leads listed.</HeaderTemplate>
</EmptyDataTemplate>
</asp:GridView>
這是我顯示彈出窗口的SelectCustFiles_Click：
protected void SelectCustFiles_Click(object sender, EventArgs e)
{
ImageButton lb = sender as ImageButton;
GridViewRow row = (GridViewRow)lb.NamingContainer;
txtRowID.Text = row.Cells[0].Text;
lblClientUploadName.Text = row.Cells[1].Text;
PopulateUploadOptions();
//modalCustUploads.Show();
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
}
這是我試圖從腳本調用的click事件：
protected void btnSave_Click(object sender, EventArgs e)
{
// Before attempting to save the file, verify
// that the FileUpload control contains a file.
if (fuPath.HasFile)
{
// Get the size in bytes of the file to upload.
int fileSize = fuPath.PostedFile.ContentLength;
// Allow only files less than 2,100,000 bytes (approximately 2 MB) to be uploaded.
if (fileSize < 45497717)
{
// Call a helper method routine to save the file.
//SaveFile(fuPath.PostedFile);
SaveFile();
fuPath.Dispose();
lbljQMessage.Text = "Update successful";
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
//modalCustUploads.Show();
}
else
lblMessage.Text = "You did not specify a file to upload.";
}
}
我收到錯誤'btnSave'未定義...
這是我正在使用的腳本：
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
解決了
我發現了問題...我將對話框添加到錯誤的位置..而不是這樣：
function showCustUploads() {
$(function () {
$("#dialogCustUploads").dialog("open");
});
$(".dialogCustUploads").parent().appendTo($("form:first"));
}
它應該是：
function showCustUploads() {
$(function () {
$("#dialogCustUploads").dialog("open");
});
}
而不是這個：
$(function () {
$("#dialogCustUploads").dialog("destroy");
$("#dialogCustUploads").dialog({
title: "Upload Files",
autoOpen: false,
modal: true,
resizable: false,
width: 'auto',
buttons: {
Save: function () {
// __doPostBack("<%=btnSave.UniqueID %>", "");
$($get("<%=btnSave.UniqueID %>")).click();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
它應該是：
$(function () {
$("#dialogCustUploads").dialog("destroy");
var dlgUploads = $("#dialogCustUploads").dialog({
title: "Upload Files",
autoOpen: false,
modal: true,
resizable: false,
width: 'auto',
buttons: {
Save: function () {
// __doPostBack("<%=btnSave.UniqueID %>", "");
$($get("<%=btnSave.UniqueID %>")).click();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
dlgUploads.parent().appendTo(jQuery("form:first"));
});
謝謝大家的幫助！ 欣賞它！
9 個解決方案
解決方案1
6 已采納 2014-04-04 12:26:19
document.getElementById('<%=btnSave.ClientID %>').click();
Or
$('#<%=btnSave.ClientID %>').click();
解決方案2
3 2014-04-04 12:27:30
你這樣做錯了：
$(document.getElementById('<%=btnSave.ClientID %>')).click();
你混淆和混淆jquery和javascript選擇器，你應該用jquery這樣做：
$('#<%=btnSave.ClientID %>').click();
或者像本機javascript一樣：
document.getElementById('<%=btnSave.ClientID %>').click();
注意：您可以將Buttton ClientIDMode設置為Static ，然后您也可以這樣做：
<asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static" BackColor="White" />
在jquery中：
$('#btnSave').click();
或者在javascript中：
document.getElementById('btnSave').click();
解決方案3
3 2014-04-04 12:29:41
$('#<%=btnSave.ClientID %>').trigger("click"); // Make sure you use '#' as part of your jQuery selector
如果$('<%=btnSave.ClientID %>')指的是按鈕，你可以通過檢查$('<%=btnSave.ClientID %>').length == 1來檢查它$('<%=btnSave.ClientID %>').length == 1 。
解決方案4
3 2014-04-04 12:47:45
嘗試使用
$（ “＃<％= btnSave.ClientID％>”）點擊（）;
並刪除按鈕的內嵌樣式。
解決方案5
2 2014-04-04 12:24:17
它應該是
document.getElementById('<%=btnSave.ClientID %>').click();
代替
$(document.getElementById('<%=btnSave.ClientID %>')).click();
因為你正在使用javascript，所以BTW jQuery是javascript，但是在$()包裝將創建jQuery對象，你將兩者結合起來。
解決方案6
2 2014-04-07 20:37:41
OnClientClick指定要執行的客戶端javascript函數，但看起來您正在嘗試使用它來執行服務器端方法。 OnClick將執行服務器端方法：
OnClick="btnSave_Click"
解決方案7
1 2014-04-04 12:22:29
嘗試這個
$('<%=btnSave.ClientID %>').click();
解決方案8
1 2014-04-04 12:28:14
嘗試使用
$("#btnSave").click();
解決方案9
1 2014-04-08 09:49:24
如果您正在嘗試實現以下目標：
當用戶單擊GridView（gvDeviceCalibration）中的上傳圖像按鈕時，將向用戶顯示一個jquery模式（或彈出窗口）。
如果用戶單擊“取消”，則不執行任何操作，否則，如果用戶單擊“保存”按鈕，則轉到事件處理程序后面的代碼“btnSave_Click”
可能的解決方案（更改'gvDeviceCalibration'GridView中的'Upload'模板字段，如下所示）：
<asp:TemplateField HeaderText="Upload">
<ItemTemplate>
<asp:ImageButton ID="CustUploadFiles" runat="server" Height="22" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Images/UploadFilesTrans.png" OnClick="btnSave_Click" Width="22" OnClientClick="return confirm('Are you sure you want to Save?')" />
</ItemTemplate>
</asp:TemplateField>
在上面的代碼中，我們使Image按鈕通過'OnClientClik'事件進行確認，並通過'OnClick'事件執行save方法調用后的代碼。
在這種情況下，您不需要使用'SelectCustFiles_Click'方法或'jquery模式。
如有任何問題，請告訴我
“ onClick”事件未觸發JavaScript中的首次按鈕單擊
[英]'onClick' event not firing first time button click in JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.