当控件位于 asp.net 的 UpdatePanel 中时，如何使用 Jquery 获取单击事件？

Posted 2023-05-09

【中文标题】当控件位于 asp.net 的 UpdatePanel 中时，如何使用 Jquery 获取单击事件？

【英文标题】：How to get click event using Jquery when control is in UpdatePanel in asp.net?

【发布时间】：2013-09-30 15:37:12

【问题描述】：

我有三个div div1,div2div3，每个div 都包含DataList 控件。当我单击DataList1 中的项目时，DataList2 将在div2 的UpdatePanel 中异步加载。

问题： 当我单击DataList2 中的控件并尝试使用jquery 访问Clicked Control Class 时，它不会触发Click 事件。有什么想法吗？

样本输出：

Jquery 脚本：

$('.imgOpaLevel2').click(function() 
                alert("hi");
    //not able to get this message when clicked on DataList2 in div2 which is in updatepanel

这是 ASP.NET 标记：

<div id="divLevel1" class="banner-sec">
            <div class="banner-bg-strip">

            <asp:DataList ID="dtDevice" runat="server" DataKeyField="DeviceID" DataSourceID="sqlDeviceList"
                RepeatColumns="5" RepeatDirection="Horizontal" ItemStyle-VerticalAlign="Top"
                OnItemCreated="dtDevice_ItemCreated" OnItemCommand="dtDevice_ItemCommand">
                <ItemTemplate>
                    <asp:HiddenField ID="hdnDeviceID" runat="server" Value='<%# Eval("TronixDeviceID") %>' />
                    <ul class="unstyled clearfix iphone-banner-img-sec">
                        <li><a href="#url">
                            <div class="banner-img-sec">
                                <asp:ImageButton ID="ImgDeviceImage" ImageUrl='<%#  Eval("DeviceImage") %>' CommandName="CategoryID" CommandArgument='<%# Eval("CategoryID") %>' class="imgOpaLevel1"
                                     RowID='<%# Container.ItemIndex + 1 %>' title='<%# Eval("DeviceName") %>'
                                    runat="server" Width="109" Height="196" />
                            </div>
                            <div class="banner-pro-img-txt">
                                <asp:Label ID="lblDisplayText" runat="server" Text='<%# Eval("DeviceName") %>' Width="114"
                                    Height="20" />
                            </div>
                        </a></li>
                    </ul>
                </ItemTemplate>
            </asp:DataList>
            <asp:SqlDataSource ID="sqlDeviceList" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnString %>"
                SelectCommand="p_GetDeviceList" SelectCommandType="StoredProcedure">
                <SelectParameters>
                    <asp:Parameter DefaultValue="1" Name="CategoryID" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>

        </div>

        <div class="container position-relative margintop_25">
            <div id="divLevel2" class="iphone-tab-main-sec" style="display: none;">
                <div id="divtopArrow" class="input-tab-arrow iPhones">
                </div>
                <div id="fadediv" class="iphone-tab-sec iphone5-2-sec">
                   <asp:UpdatePanel runat="server" ID="updatePanelLevel2">
                        <Triggers>
                        </Triggers>
                        <ContentTemplate>
                            <asp:DataList id="dlCarreirList" runat="server" DataKeyField="CarrierID" 
                                RepeatColumns="5" RepeatDirection="Horizontal" 
                                ItemStyle-VerticalAlign="Top" onitemcreated="dlCarrerList_ItemCreated">
                                <ItemTemplate>
                                    <asp:HiddenField ID="hdnCarrerID" runat="server" Value='<%# Eval("CarrierID") %>' />
                                    <ul class="unstyled clearfix" style="height:164px;">
                                        <li><a href="#url">
                                            <div class="iphone5-2-pro-img">
                                                <asp:ImageButton ID="ImageButton1" ImageUrl='<%#  Eval("CarrierImg") %>' class="imgOpaLevel2"
                                                     RowID='<%# Container.ItemIndex + 1 %>' title='<%# Eval("Carrier") %>'
                                                    runat="server" />
                                                <div class="iphone-pro-img-txt">
                                                    <asp:Label ID="lblDisplayText" runat="server" Text='<%# Eval("Carrier") %>'/>
                                                 </div>
                                        </a></li>
                                    </ul>
                                </ItemTemplate>
                            </asp:DataList>
                            <asp:Label ID="lbltest" runat="server" Text="Hello" Width="114" Height="20" Visible="false" />
                       </ContentTemplate>
                    </asp:UpdatePanel>

<div id="Level3">

</div>

在 .cs 文件中：

protected void dtDevice_ItemCreated(object sender, DataListItemEventArgs e)
    
        var control = e.Item.FindControl("ImgDeviceImage");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    
    protected void dtDevice_ItemCommand(object source, DataListCommandEventArgs e)
    
        lbltest.Text = "hi";
        int categoryid = 0;
        if (e.CommandName != null)
        
            if (e.CommandName == "CategoryID")
            
                categoryid = Convert.ToInt32(e.CommandArgument);
                GetCarrerMasterList(categoryid);
            
        
    
    protected void dlCarrerList_ItemCreated(object sender, DataListItemEventArgs e)
    
        var control = e.Item.FindControl("ImageButton1");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    
    protected void GetCarrerMasterList(int categoryid)
    
        iPhoneBiz Objiphone = new iPhoneBiz();
        Objiphone.CarrierID = categoryid;

        DataTable dtCarrierList = Objiphone.GetTronixCarrierList();
        if (dtCarrierList != null && dtCarrierList.Rows.Count > 0)
        
            dlCarreirList.DataSource = dtCarrierList;
            dlCarreirList.DataBind();
        


    

更新：

$(document).on('mouseenter', '.imgOpaLevel2', function() 
    alert("iElement ID:"+this);
    $('.imgOpaLevel2').stop().animate( opacity: 1.0 , 200);
    $(this).hover(
                   function() 
                       $('.imgOpaLevel2').stop().animate( opacity: 0.5 , 200);
                       $(this).stop().animate( opacity: 1.0 , 200);
                       if (selectedImgIDLevel2 != null) 

                           $('.imgOpaLevel2').stop().animate( opacity: 0.5 , 200);

                           $("#" + selectedImgIDLevel2).stop().animate( opacity: 1.0 , 200);
                       
                       else 

                           //nothing
                       
                   , 
                   function() 

                       if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) 
                           $('.imgOpaLevel2').stop().animate( opacity: 1.0 , 200);
                           //this will reset Opacity on Mouseout

                   )
    );

【参考方案1】：

当您动态加载新控件时，您需要将点击事件绑定为实时事件与 jQuery http://api.jquery.com/live/

喜欢：

$('#divLevel2').on('click', '.imgOpaLevel2', function (e) 
      alert("hi");
);

【讨论】：

嗨@Johannes Renatus，我已经用标记为“更新”的方式编辑了我的代码。我尝试使用“on”它可以工作，但是当使用鼠标悬停时，alert() 方法下面的代码不会被执行！如果我的代码错误，请纠正？

看起来不错，但我从来没有这样尝试过。 Sry 对此无能为力。尝试用 div "divLevel2" 替换 "document" 以获得更好的性能

不抱歉@SHEKHAR 不知道自动取款机。