javascript - jQuery 事件未从我的 asp.net 控件触发

Question

我对 jQuery 相当陌生，我试图在客户端而不是我通常的服务器端代码中实现其中一些功能。我只是想添加一些点击事件，进行一些练习等...但我看到了这个问题，并且不确定从哪里开始进行故障排除，因为它正在我的独立 html 页面上运行。

这是一个继承自母版页 (Site.Master) 的 Web 应用程序页面。我正在稍微修改 .js 文件，因为我通过放置 Alert() 只是为了查看某些内容而跑了一会儿……但这并没有触发。

为什么我的事件没有触发？

HTML:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" 
CodeBehind="ProductMaintenance.aspx.vb" Inherits="CStock.ProductMaintenance" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>     

<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
    <ContentTemplate>

    <asp:Panel ID="Panel1" runat="server" GroupingText="" cssClass="pnl1">
    </asp:Panel>

    <div class="mainGroup">
        <div class="headerGroup">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <select name="type" id="type">
                <option value="Categories">Categories </option>
                <option value="Products">Products </option>                   
            </select>              
        </div>
    </div>

    <div>
        <asp:Button ID="submitform" runat="server"  Text="Button" />
        <asp:Button ID="HideButton" runat="server" Text="HideButton" />            
        <hr />
    </div>



    </ContentTemplate>    
</asp:UpdatePanel>

<div class="sqlData">
...
...
...

</div>

<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript" src="scripts/site.js"></script>

Javascript (site.js)

 $('#submitform').on('click', function (event) {    
       Alert("TESTING");
       $( ".HideButton" ).hide();
       $( "#HideButton" ).hide();
})


$('input[name=submitform]')
.click(
     function ()
     {
        $(this).hide();
        $( ".HideButton" ).hide();
        $("#HideButton").hide();
        Alert("TESTING");
     }
);

更新了 JavaScript:

$('#submitform').on('click', function (event) {    
    Alert("TESTING");
   // $( ".HideButton" ).hide();
   // $( "#HideButton" ).hide();
})


$('input[id*=submitform]')
.click(
     function ()
     {
        Alert("TESTING2");
     }
);

    $('input[name=submitform]')
.click(
     function () {
         Alert("TESTING2");
     }
);

另外，哪种添加事件的方法是最佳实践？

Answer 1

您的事件不会触发，因为 .NET 在服务器控件(具有 runat="server"属性)时会转换您的 ID。例如，您为按钮指定了 ID“submitform”，但当它在页面上生成时，它可能类似于“ctl00_container_submitform”。查看生成的页面源代码，您就会明白我的意思。你仍然可以用 jquery 完成你想要的事情。只需将选择器更改为 $("[id*=submitform]") 即可查找具有“id”属性并以“submitform”结尾的任何控件。

编辑:由于您的按钮位于更新面板中，因此您需要更新为以下内容:

$(document).on('click', '[id*=submitform]', function () {}); 

在此处查看“on”的文档 http://api.jquery.com/on/

当更新面板中的内容被替换时，该按钮的绑定(bind)就会丢失。如果您绑定(bind)到文档(静态)，则绑定(bind)将始终有效。可选的选择器参数指示如果单击文档并且文档中的元素与选择器匹配，则应触发该函数。