Question

我一直试图从Button1调用JQuery代码，但每当我点击按钮时都没有任何反应。我怀疑这里缺少一些东西。

<%@ 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>

Answer 1

您已将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");
});

或使用class selector。

Answer 2

可能<asp:Button />上的呈现ID不是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>

Answer 3

你可以尝试将class添加到button元素，并在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"]')查找按钮元素，使用上下文是为了获得更好的性能。

编辑II：

您的代码运作良好（see this）。您应该验证文件“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.

如何从ASP Button调用JQuery？

3 个答案: