Fatal编程技术网
  • jquery/
  • jQuery在aspx页面中未正确显示

jQuery在aspx页面中未正确显示

jquery asp.net visual-studio-2010

jQuery在aspx页面中未正确显示,jquery,asp.net,visual-studio-2010,Jquery,Asp.net,Visual Studio 2010,我试图让这个函数在一个aspx页面中工作，但我过得很糟糕。基本上，它在常规HTML页面中工作正常，但在aspx页面中，当单击按钮时，您所能看到的只是顶部的一小部分，有时（每5次+单按钮单击和每双击一次）消息会像应该的那样显示和消失。我错过了什么？它会不会被绑在后防线上 在aspx页面中使用的代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="checkTest.aspx.cs" Inherits="WebApplica

我试图让这个函数在一个aspx页面中工作，但我过得很糟糕。基本上，它在常规HTML页面中工作正常，但在aspx页面中，当单击按钮时，您所能看到的只是顶部的一小部分，有时（每5次+单按钮单击和每双击一次）消息会像应该的那样显示和消失。我错过了什么？它会不会被绑在后防线上

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


$（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“.message”）.stop（true，true）.slideToggle（）.fadeOut（6000）；
});
});
.消息{高度：70px；显示：无；}
.noChangesMessage{宽度：84px；填充：8px 8px；背景：#535353；-webkit边框半径：5px；-moz边框半径：5px；边框半径：5px；颜色：白色；文本对齐：中心；}
.tipEnd{宽度：0；高度：0；边框左侧：10px实心透明；边框右侧：10px实心透明；边框顶部：10px实心#53535353；边距：0自动；}




没有进行任何更改！
通过查看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>


$（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“.message”）.stop（true，true）.slideToggle（）.fadeOut（6000）；
});
});
.
.消息{高度：70px；显示：无；}
.noChangesMessage{宽度：84px；填充：8px 8px；背景：#535353；-webkit边框半径：5px；-moz边框半径：5px；边框半径：5px；颜色：白色；文本对齐：中心；}
.tipEnd{宽度：0；高度：0；边框左侧：10px实心透明；边框右侧：10px实心透明；边框顶部：10px实心#53535353；边距：0自动；}




没有进行任何更改！
试试这个：

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

$（“#”）。单击（函数（）{
$（“.message”）.stop（true，true）.slideToggle（）.fadeOut（6000）；}
);
这与asp.net动态命名html元素有关，获取Id值的一种方法是使用clientId，如Button1.clinetId

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

$（“#”）点击（函数（）{
$（“.message”）.stop（true，true）.slideToggle（）.fadeOut（6000）；
});
很简单，

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

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

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

就我个人而言，我不喜欢更改代码来解决类似这样的问题，因为该ID是ASP.NET控件所必需的，我们不妨将其作为目标

我发现选择.NET控件的最佳方法是使用“ending in”（结束于）选择器，因为它们的ID是在运行时预先添加的

$("[id$='Button1']").click(function () {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});
我不知道您是否正在使用母版/内容页，但如果是这样，我发现works为您的母版/内容页提供了一个ID

如果您只是使用其中一个，并且假设您给母版页一个ID“Mstr”，给内容页一个ID“Cont”，您可以创建如下JavaScript前缀：

var masterPrefix = "Mstr_",
    contentPrefix = "Cont_";
然后，您可以创建一个名为
$getElement（）
的函数，该函数允许您在标记中传递给定的ID，如下所示：

function $getElement(id) {
    return $("#" + masterPrefix + contentPrefix + id);
}
然后，根据您的具体示例，您可以通过执行以下操作将jQuery对象获取到runat=“server”div：

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。

查看呈现的代码（在浏览器中查看源代码），并在fiddler中使用该代码或在此处发布。@amit_g通过查看源代码查看上面添加的代码这很可能是因为表单已提交。单击此按钮时是否发生回发？您缺少$for
$（“.message”）
您缺少$for
$（“.message”）
没问题，鲍勃！英雄联盟我必须这么做！您缺少$for
$（“.message”）
，因此我如何调用该函数，使其不会触发回发，从而使动画不会取消？