Click事件在asp.net中使用Jquery控件在更新面板中時不會觸發？

Question

我在DataList有一個Control，比如在UpdatePanel imgOpaLevel2 class指定為“ imgOpaLevel2 ”的ImageButton 。 我想在DataList圖像上設置懸停效果，並將鼠標懸停設置為活動，而將其他值設置為不透明度。

當我刪除UpdatePanel它工作正常。 但是，在為DataList添加UpdatePanel ，它無法正常工作。 任何想法？

標記：

<asp:UpdatePanel runat="server" ID="updatePanelLevel2">
                        <Triggers>
                        </Triggers>
                        <ContentTemplate>
                            <asp:DataList id="dlCarreirList" runat="server" DataKeyField="CarrierID" 
                                RepeatColumns="50" RepeatDirection="Horizontal" 
                                ItemStyle-VerticalAlign="Top" onitemcreated="dlCarrerList_ItemCreated" 
                                onitemcommand="dlCarreirList_ItemCommand">
                                <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="ImgDeviceImageLevel2" CommandName="ImgButtonLevel2" CommandArgument='<%# Eval("CarrierID") %>' 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>

UpdatePanel刪除時的Jquery腳本工作正常 ：

$('.imgOpaLevel2').each(function() {
            $('.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
                       }
                   }, //SMS: hoverOut function parameter here
                   function() {

                       if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) {
                           $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
                       }    
                   })
        });

所以試着 ：

$(document).on('mouseenter', '.imgOpaLevel2', function() {
            var id = $(this).attr('id');
            alert("after ID:" + id);
            $('.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() {
                       //$("#toolTipLevel2").css("display", "none");
                       if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) {
                           $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
                       }    
                   })
        });

注意：上面的代碼只會顯示alert但alert后的代碼不起作用，如果出錯了，請輸入正確的代碼。

幫助贊賞！ 謝謝！

Answer 1

使用更新面板時，請在javascript中的pageLoad事件上附加事件

function pageLoad() {
$('.someclass').on('click',function(event){});
}