按钮事件未在 javascript 中触发答案

【问题标题】：Button event not firing in javascript按钮事件未在 javascript 中触发
【发布时间】：2014-04-04 12:21:20
【问题描述】：

我添加了一个 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);
    }

这是我试图从脚本调用的点击事件：

    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"));
    });

感谢大家的帮助！！！欣赏！

【问题讨论】：

只使用jquery或者javascript，jquery syntex会 $('#')).click();
@user2042152：您能否确认您是否可以使用简单的“浏览器确认弹出窗口”而不是使用“jquery modal popup”来询问保存文件的确认？在那种情况下，我有一个建议。让我知道。
@user3240361，是的，我是......我之前使用过 ajax 控制工具包，但由于很多兼容性问题，我必须找到其他东西，只要它与 IE 8 兼容...
@user2042152：在下面查看我的答案。

标签： c# javascript jquery asp.net

【解决方案1】：

 document.getElementById('<%=btnSave.ClientID %>').click();

 Or

 $('#<%=btnSave.ClientID %>').click();

【讨论】：

您好，感谢您的帮助，这会触发事件，但它给了我“Microsoft JScript 运行时错误：'btnSave_Click' 未定义”的错误？
从您的按钮中删除 OnClientClick。添加 $('').trigger("click");内部脚本。
删除onclientclick并添加上述方法按钮似乎什么都不做......

【解决方案2】：

你做错了：

$(document.getElementById('<%=btnSave.ClientID %>')).click();

您正在混淆 jquery 和 javascript 选择器，您应该使用 jquery 这样做：

$('#<%=btnSave.ClientID %>').click();

或者像这样使用原生 javascript：

document.getElementById('<%=btnSave.ClientID %>').click();

注意：您可以将按钮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();

【讨论】：

您好，感谢您的帮助，现在单击保存按钮给我一个错误：“Microsoft JScript 运行时错误：'btnSave_Click' 未定义”...有什么想法吗？
未定义您在客户端单击按钮的事件删除该事件或添加 btnSave_Click 的定义
谢谢我得到它给我一个回发，但它给出了一个完整的回发，在数据进入保存方法之前清除数据？

【解决方案3】：

尝试使用

$("#").click();

并删除按钮的内联样式。

【讨论】：

我删除了内联样式，但它给了我一个错误：“Microsoft JScript 运行时错误：'btnSave_Click' 未定义”
尝试使用 OnClick 代替 OnClientClick。
它仍然没有做任何事情，我尝试使用： __doPostBack('btnSave','OnClick');它关闭了对话框......但仍然没有达到点击事件......
你能分享你的服务器端和客户端代码以便更好地理解吗？

【解决方案4】：

$('#<%=btnSave.ClientID %>').trigger("click"); // Make sure you use '#' as part of your jQuery selector

如果$('<%=btnSave.ClientID %>')指的是按钮，你可以通过检查$('<%=btnSave.ClientID %>').length == 1来检查。

【讨论】：

感谢它给了我一个错误：“Microsoft JScript 运行时错误：'btnSave_Click' 未定义”
调用 alert($('').length); ?还有你使用的是哪个版本的 jQuery？
长度返回为 0，我使用以下 2 个脚本：
你只需要一个，我会选择第二个。我最好的选择是使用 Chrome 开发工具 - 在 chrome 中，只需右键单击按钮并在上下文菜单中说“检查元素”。检查那里的按钮并将其与进行比较，它们必须相同。
嗨，当我检查它给出的元素时：我认为是 id匹配...

【解决方案5】：

应该是

document.getElementById('<%=btnSave.ClientID %>').click();

改为

$(document.getElementById('<%=btnSave.ClientID %>')).click();

因为您使用的是 javascript，BTW jQuery 是 javascript，但是包裹在 $() 中会创建 jQuery 对象，您将两者结合起来。

【讨论】：

【解决方案6】：

OnClientClick 指定要执行的客户端 javascript 函数，但看起来您正试图使用它来执行服务器端方法。 OnClick 会执行一个服务端方法：

OnClick="btnSave_Click"

【讨论】：

当我删除 OnClientClick 并添加 Click 事件时，什么都没有发生，按钮没有回发什么...我可以多次单击该按钮，但没有任何反应....

【解决方案7】：

试试这个

$('<%=btnSave.ClientID %>').click();

【讨论】：

【解决方案8】：

尝试只使用

   $("#btnSave").click();

【讨论】：

【解决方案9】：

如果您正在尝试实现以下目标：

当用户点击 GridView (gvDeviceCalibration) 中的上传图片按钮时，用户会看到一个 jquery 模式（或弹出窗口）。
如果用户单击“取消”，则您什么也不做，否则如果用户单击“保存”按钮，则转到事件处理程序“btnSave_Click”背后的代码

可能的解决方案（在“gvDeviceCalibration”GridView 中更改您的“上传”模板字段，如下所示）：

<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>

在上面的代码中，我们让图像按钮通过“OnClientClik”事件进行确认，并通过“OnClick”事件调用保存方法的代码。

在这种情况下，您无需使用“SelectCustFiles_Click”方法或“jquery modal”。

如有任何问题请告诉我

【讨论】：

感谢您的建议！这会起作用，但我有一个证书号和一个上传应该完成的日期，并且用户在输入其他数据之前首先选择上传的可能性是存在的，如果我不会对用户友好无法上传其他数据的选项...有什么想法吗？
@user2042152：我无法得到这部分。！能再解释一遍吗？
我必须保存一个证书编号，即上传文件完成证书的日期。从上传控件执行 onclick 在用户友好性方面使其复杂化......我不能将上传控件中的保存方法用于请求在保存这些字段之前必须完成并验证其他 2 个字段......