单击asp.net母版页上的jQuery问题

时间:2015-03-27 14:47:41

标签: jquery asp.net

我的Jquery点击似乎没有按预期运行。正在找到控件,但下一行代码似乎确实执行了。它似乎在它到达警报之前退出。我在主页上使用asp.net c# chrome中的调试器没有错误 客户JS文件加载在实际表单

网络表单

  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <script src="Scripts/Site%20JS.js"></script>
    </asp:Content>
...
...

     <asp:Button ID="btn_save" runat="server" Text="Save" Width="108px" 

JS档案

  $(document).ready(function () {           
        $("#btn_save").click(function () {
            alert("Test");
            validate(); 
        }
      )    
    });

下面加载到母版页的头部

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - My ASP.NET Application</title>

        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/datepicker.css" rel="stylesheet" />
        <link href="Content/Site.css" rel="stylesheet" />
        <link href="Content/datepicker3.css" rel="stylesheet" /> 
        <script src="Scripts/jquery-2.1.3.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="Scripts/bootstrap-datepicker.js"></script>    
        <script src="Scripts/jquery.validate.min.js"></script>
        <script src="Scripts/modernizr-2.8.3.js"></script>    
 <asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>

</head>

3 个答案:

答案 0 :(得分:3)

我怀疑你的代码实际上并没有找到按钮。使用母版页会导致渲染的html与您实际编码的内容不同。如果您使用的是.NET 4.0或更高版本,则可以将ClientIDMode=Static添加到按钮,以便在实际发送到客户端时呈现的ID相同。

另外值得注意的是,如果你的jQuery代码在脚本文件中,那么使用
$("<#%=btn_save.ClientID%>").click()无效。只有在实际的.aspx页面上包含此代码时,客户端ID才会替换服务器标记。对于客户端ID使用static是jQuery在脚本文件中查找控件的最简单/最快的方法。

答案 1 :(得分:3)

jQuery的“选择ID结束的位置”可以用作ClientIDMode的替代

$("[id$='btn_save']")

答案 2 :(得分:1)

如果您检查发出的html,您的按钮可能会有cphHead100$btn_save或类似的ID。您需要将ClientIDMode设置为静态。

<asp:Button ID="btn_save" runat="server" Text="Save" Width="108px"
    ClientIDMode="static" />

这将确保按钮呈现为id="btn_save"