Question

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

这是一个继承自Masterpage（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 =＆＃34;服务器＆＃34;属性）时转换您的ID。例如，您为按钮提供了ID＆＃34; submitform＆＃34;，但是当它在页面上生成时，它可能类似于＆＃34; ctl00_container_submitform＆＃34;。看一下生成的页面源，你就会明白我的意思。您仍然可以使用jquery完成您想要的任务。只需将您的选择器更改为$("[id*=submitform]")，它将查找具有属性＆＃34; id＆＃34;的任何控件。以＆＃34; submitform＆＃34;结束。

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

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

查看＆＃34; on＆＃34;的文档。这里http://api.jquery.com/on/

更换更新面板中的内容后，该按钮的绑定将丢失。如果绑定到文档（它是静态的），绑定将始终有效。可选的selector参数指示如果单击文档，并且文档中的元素与选择器匹配，则应触发该函数。

Answer 2

将属性ClientIDMode="static添加到按钮

  <asp:Button ID="submitform" runat="server"  Text="Button" ClientIDMode="Static"/>
  <asp:Button ID="HideButton" runat="server" Text="HideButton" ClientIDMode="Static" />

那么你可以通过$（“＃submitForm”）和$（“＃HideButton”）来引用它们

为了保证唯一ID，webforms在添加时会向id字段添加内容。将ClientIDMode更改为static告诉它您将确保它始终是唯一的，它将为您提供正确的ID

jQuery事件没有从我的asp.net控件触发

2 个答案: