Jquery 类选择器在 ASP.Net Gridview 中不起作用

Posted 2023-04-13

【中文标题】Jquery 类选择器在 ASP.Net Gridview 中不起作用

【英文标题】：Jquery class selector is not working in ASP.Net Gridview

【发布时间】：2014-07-22 21:56:07

【问题描述】：

使用下面的代码，我正在尝试为下拉“ddlAction”的更改事件编写一些验证代码。

我尝试了几种方法，例如

$(".ddlAction").change(function ()

$("#grdApproval").find("[id^='ddlAction']").change(function ()

$("input[id*=ddlAction]").change(function ()

$("input[value*=ddlAction]").change(function ()

--> 仅当我在 gridview 的第一页时才有效。

C#代码：

<asp:TemplateField HeaderText="ACTION" ItemStyle-Width="10%">
    <ItemTemplate>
        <asp:DropDownList ID="ddlAction" CssClass="ddlAction" runat="server" BorderStyle="Solid" Width="150px" SkinID="GridEdit" ValidationGroup="Compensation" Enabled="true"/>
    </ItemTemplate>
</asp:TemplateField>

jQuery :

$(function () 
    $(".ddlAction").change(function () 
    //$("#grdApproval").find("[id*='ddlAction']").change(function () 
    //$("input[id*=ddlAction]").change(function () 
    //$("input[value*=ddlAction]").change(function () 
        //do something;
    );
);

页面来源：

<select name="ctl00$MainContent$grdApproval$ctl03$ddlAction" id="MainContent_grdApproval_ddlAction_1" class="ddlAction" style="color:Black;background-color:#FFFF99;border-style:Solid;font-family:Verdana;font-size:9pt;width:150px;">
<option value="97" title="-----------Select-----------">-----------Select-----------</option>
<option value="FS" title="Finalize-Submit">Finalize-Submit</option>
<option value="NMR" title="Needs More Research">Needs More Research</option>

【参考方案1】：

这个：

$(".ddlAction").on('change', function () 

)

应该可以。它会将更改事件附加到页面上的每个 .ddlAction 下拉列表，而不仅仅是表格

您没有显示 gridview id，我认为它是 '#grdApproval'

所以你的代码最好改成：

$('#grdApproval').on('change','.ddlAction', function() 

)

这样它将使用事件委托。

如果您对 gridview 使用回调，或者在 UpdatePanel 中包装 gridview，它可能无法正常工作，除非是第一个页面

在这两种情况下，您都需要在异步回发后重新设置处理程序

更新：如果您有更新面板，您需要执行以下操作：

   // lets say you have function that you call to init your page:

   function myInit() 
       $('#grdApproval').on('change','.ddlAction', function() 

       ) 
   

   // and you calling it on page load
   $(document).ready(myInit)


   // add the following line, to run the same code on pageLoaded
   // for async postback driven by UpdatePanel 

   Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(myInit);

【讨论】：

是的，我的网格在 UpdatePanel 中。您能否建议我在异步回发后如何重新设置处理程序？

【参考方案2】：

以下代码正常工作并通过在异步回发后重新附加事件修复了问题

JQuery:

function pageLoad(sender, args) 
$(document).ready(function () 
    $(".ddlAction").change(function () 
        var HFStatusChangedId = this.id.replace("ddlAction", "HFStatusChanged");
        if (this.selectedIndex !== "97") 
            document.getElementById(HFStatusChangedId).value = "Y";
        
    );
);