如何制作按钮单击事件处理程序工作?

时间:2015-02-20 06:21:50

标签: javascript asp.net gridview modal-dialog

我将gridView链接按钮链接到模式弹出窗口,如下所示:

 <asp:TemplateField HeaderText="Analyze">
                                 <ItemTemplate>
                                       <asp:LinkButton Text="Analyze" ID="lnkView" runat="server" ControlStyle-Font-Underline="true"  />
                                 </ItemTemplate>
                             </asp:TemplateField>

模态弹出窗口的代码如下:

 <div id="dialog" style="display: none">
            <div style="text-align:center">
                 <asp:Label ID="Label12" runat="server" Text="Result Id:" />
                <asp:TextBox ID="tb" runat="server" Value="102" />
            </div>
            <br />
            <div>
                <asp:Label runat="server" Text="Bug Id:" />
                <asp:TextBox runat="server" id="bugidtb" Value="Enter Bug Id:"/>
            </div>
            <br />
            <div>
                <asp:Label ID="Label11" runat="server" Text="Bug DB:" />
                <asp:DropDownList runat="server" Width="250px" ID="Bugdb" >
                    <asp:ListItem>OneBug</asp:ListItem>
                    <asp:ListItem>Jira</asp:ListItem>
                </asp:DropDownList>
            </div>
            <br/><br/>
            <asp:Button runat="server" Text="OK" OnClick="ModalOK_Click"/>
            <asp:Button runat="server" Text="Cancel" />
            <asp:Label runat="server" ID="test" Text="hello world" />

        </div>


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
            rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(document).on("click", "[id*=lnkView]", function () {

                $("#resultId").html($(".ResultId", $(this).closest("tr")).html());
                $("#dialog").dialog({
                    title: "Analyze Result",
                    modal: true
                });
                return false;
            });
        </script>

模态中的按钮单击事件处理程序代码未执行。 我进行了调试,发现事件处理程序根本没有响应。

如何让它发挥作用?

2 个答案:

答案 0 :(得分:0)

可能的问题是你的jquery脚本无法找到事件未触发的id。

尝试使用

     '<%=lnkView.ClientID%>' 

这将非常快,因为它将使用原生document.getElementById

选择器中的

OR
  尝试使用jquery结束选择器,

          input[id$='lnkView']

您还可以使用ends with jquery选择器使用lnkView获取input[id$='lnkView']服务器生成的ID。然而,$("[id$=lnkView]")将选择多个元素,因此如果您将相同的id分配给多个元素,并且如果您想遍历所有元素,那么第一个案例将无法正常工作。

但我会采用第一种方法。因为服务器控件id生成模式是你不想依赖的东西。

答案 1 :(得分:0)

最好尝试使用链接按钮标签本身调用click事件,因为无法通过javascript识别位于gridview中的按钮,链接按钮,图像等。

function Analyse(){

            $("#resultId").html($(".ResultId", $(this).closest("tr")).html());
            $("#dialog").dialog({
                title: "Analyze Result",
                modal: true
            });
            return false;
        }

将属性 OnClientClick =“Analyze()”添加到链接按钮