c# - JQuery 不能在带有 Masterpage 的 aspx-page 中工作

Question

我已经制作了这个示例，它在普通的 aspx 网页上运行良好。我使用 Visual Studio 2010。

头部:

<title>Show/hide element</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#CheckBoxShowHide').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

body 部位:

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

当我在子网页上有一个母版页和相同的代码时，JQuery 不起作用。 JQuery javascript 文件加载失败。子页面和母版页位于同一文件夹中。如果我将代码放在母版页上，它可以正常工作，但我也希望子页面上有 JQuery。请帮助我。

Answer 1

我还可以看到另一个问题，您正在尝试根据其服务器 ID 而不是 ClientID 来获取复选框 ID。一旦 asp 控件被呈现到客户端，它的 ID 就会发生变化。尝试以下代码:

<title>Show/hide element</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#<%=CheckBoxShowHide.ClientID%>').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

body 部位:

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

以下行是我唯一更改的内容:

$('#<%=CheckBoxShowHide.ClientID%>').click(function () {

希望有帮助。