c# - コントロールがasp.netのUpdatePanelにあるときにJqueryを使用してクリックイベントを取得するには?

Question

それぞれにコントロールを含む3 つのdivdiv1,div2div3 があります。の項目をクリックすると、の UpdatePanel で非同期に読み込まれます。DataListdivDataList1DataList2div2

問題: コントロールをクリックしてDataList2アクセスしようとすると、イベントが発生しません。何か案が？Clicked Control ClassjqueryClick

出力例:

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"
                                    alt="" 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"
                                                    alt="" 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

                   })
    });