Question

我正在尝试让这个函数在aspx页面中工作，但我的时间很糟糕。基本上它在普通的HTML页面中工作正常，但在aspx页面中，当你点击按钮时，你可以看到的是顶部的一小部分，有时候（每隔5点+单击一次按钮，每次双击）消息显示和像它应该的那样消失。我错过了什么？可能会在回发中被束缚吗？

FIDDLE HERE

在aspx页面中使用的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="checkTest.aspx.cs" Inherits="WebApplication2.checkTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () {
                    $(".message").stop(true,true).slideToggle().fadeOut(6000);
                });
            });
        </script>
    <style type="text/css">
    .message{height:70px;display:none;}
        .noChangesMessage{width:84px;padding:8px 8px;  background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;}
        .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;}

    </style>
</head>
<body>
    <form id="form1" runat="server">



    <br /><br /><br />
    <div>
    <div style="width:100px">
    <div style="height:70px">            
                <div style="margin-bottom:5px;" class="message">
                    <div class="noChangesMessage">No changes were made!</div>
                    <div class="tipEnd"></div>
                </div></div>
            <div style="">
                <asp:Button ID="Button1" runat="server" Text="Save Changes"  />
            </div>
            </div> 

    </div>


    </form>
</body>
</html>

我的代码来自amit_g

的查看源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () {
                    $(".message").stop(true,true).slideToggle().fadeOut(6000);
                });
            });
        </script>
    <style type="text/css">.
    .message{height:70px;display:none;}
        .noChangesMessage{width:84px;padding:8px 8px;  background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;}
        .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;}
    </style>
</head>
<body>
    <form method="post" action="checkTest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRkU+SP3bu4QJNH9S9XtdwPbEE8YODY/YlkotOt6l692s8=" />
</div>
<div class="aspNetHidden">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKroLr3AwKM54rGBtLTfCTwYmYnb6l8tnp5jtojhvORYMJ6bPzAI+qbaDlU" />
</div>
    <br /><br /><br />
    <div>
    <div style="width:100px">
    <div style="height:70px">            
                <div style="margin-bottom:5px;" class="message">
                    <div class="noChangesMessage">No changes were made!</div>
                    <div class="tipEnd"></div>
                </div></div>
            <div style="">
                <input type="submit" name="Button1" value="Save Changes" id="Button1" class="Button1" /></div>
            </div>   
    </div>
    </form>
</body>
</html>

Answer 1

试试这个：

$("#<%= Button1.ClientID %>").click(function () {    
   $(".message").stop(true,true).slideToggle().fadeOut(6000);}
);

Answer 2

这与asp.net动态命名html元素有关，你可以获得Id值的一种方法就是使用像Button1.clinetId这样的clientId

 $("#<%=Button1.ClientID %>").click(function () {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

就是这么简单

Answer 3

按钮单击会触发回发，从而导致重新加载页面。您的动画在有机会播放之前会被取消（除非是随机延迟）。

ASP.NET Webforms将事件处理程序附加到按钮单击事件，该事件触发为您的页面动态生成的javascript。这是webforms中交互式页面的核心机制。

Answer 4

我看到他们将id更改为类的答案，以便正确选择按钮。

就个人而言，我不喜欢更改代码来解决这样的问题，因为ASP.NET控件需要ID，我们也可以将其作为目标。

我发现选择.NET控件的最佳方法是在运行时添加ID，这是使用'ending in'选择器。

$("[id$='Button1']").click(function () {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

Answer 5

我不知道您是否使用主页/内容页面，但如果是这样，我发现有效的方法是为您的主页/内容页面提供ID。

如果您只是使用其中一个，并假设您向Master页面提供ID为“Mstr”而内容页面为ID“Cont”，则可以创建如下所示的JavaScript前缀：

var masterPrefix = "Mstr_",
    contentPrefix = "Cont_";

然后，您可以创建一个名为$getElement()的函数，它允许您传递您在标记中提供的ID，如下所示：

function $getElement(id) {
    return $("#" + masterPrefix + contentPrefix + id);
}

然后，根据您的具体示例，您可以通过执行以下操作获取runat =“server”div的jQuery对象：

var $button = $getElement("Button1");

$button.click(function() {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

当你进入拥有大量客户端脚本的大型项目时，我发现这种方法可以节省生命。

或者，如果您不想调用其他函数来返回对象，则可以始终执行此操作：

var $button = $('input[id$="Button1"]');

$button.click(function() {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

这里你只是说给我一个ID以“Button1”结尾的div。

jQuery在aspx页面中没有正确显示

5 个答案: