0

我一直在尝试从中调用 JQuery 代码，Button1但是每当我单击该按钮时，什么都没有发生。我怀疑这里缺少一些东西。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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="Scripts/jquery-1.4.1.js"/>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"/>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#Button1").click(function () {
            alert("Hello");
         });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />    
    </div>
    </form>
</body>
</html>

请帮助我，因为我是 ASP 的 Jquery 新手

更新！呈现的 HTML

<!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="Scripts/jquery-1.4.1.min.js"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#B1").click(function () {
                alert("Hello");
            });
        });
    </script>
</head>
<body>

    <form name="form1" method="post" action="Default.aspx" id="form1" enctype="multipart/form-data">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNzQxODc4NzgPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGEWAgITDzwrAA0AZBgBBQlHcmlkVmlldzEPZ2S859s2HXOd3dMN1a3AFBBA24YTWA==" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLCh8GMCAKl1bK4CQK1qbSRCwKM54rGBgK7q7GGCALWlM+bAgLe7+btDB1tn9tYIpN00SJIvx3i3VxCTOP7" />
</div>


    <input type="submit" name="B1" value="Button" id="B1" />

    </form>

</body>
</html>
4

3 回答 3

2

您已经包含了 jquery 两次——标准版和缩小版。您不需要两次包含相同的 js 库。标签也<script>不能自动关闭。

这是正确的方法：

<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#Button1").click(function () {
            alert("Hello");
        });
    });
    </script>
</head>

此外，由于控制 ASP.NET 中的名称修改，建议使用服务器端构造来确保 id 正确：

$("#<%= Button1.ClientID %>").click(function () {
    alert("Hello");
});

或使用类选择器。

于 2012-09-08T18:44:00.637 回答
2

可能你的渲染ID<asp:Button />不是Button1，而是类似ctl00_Button1

试试这个

$(document).ready(function(){
    $("#<%=Button1.ClientID %>").click(function () {
        alert("Hello");
    });
});

看来您正在加载 jQuery 两次，其中之一是为带宽速度而缩小的

拿出第一个

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

留下这个

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
于 2012-09-08T18:45:57.287 回答
0

您可以尝试将类添加到按钮元素，并在 div 上下文中找到它：

Javascript：

$(document).ready(function(){

   var $context = $('#containerForm').find('form'); 
   $context.find('.mybutton').bind('click', function (event) {
      alert("Hello");
   });
});

html:

<body>
    <div id="containerForm">
       <form id="form1" runat="server">
       <div runat="server">
           <asp:Button ID="Button1" runat="server" Text="Button" class="mybutton" />    
       </div>
       </form>
    </div>
</body>

编辑：

或者，使用此选择器查找按钮元素$context.find('input[name*="Button1"]')，使用上下文以获得更好的性能。

编辑二：

您的代码运行良好（见此）。您应该验证文件“ Scripts/jquery-1.4.1.min.js”是否加载正常，您可能位于与文件夹“ Scripts”不同级别的路径中，具体取决于级别或设置项目时，您可以放置​​“ Scripts/jquery-1.4.1.min.js”，但是如果你有“ /MyProyect/Scripts/jquery-1.4.1.min.js”，你必须小心。

要验证这一点，您可以使用“ fiddler ”，并找到 http 状态码 400。

于 2012-09-08T19:58:16.923 回答