3

我有一个控制在DataList说ImageButton分配class为“ imgOpaLevel2”在UpdatePanel。我想在图像上设置悬停效果，DataList并将鼠标悬停在哪个鼠标悬停上，其他设置为不透明度，并具有一定的价值。

当我删除UpdatePanel它工作正常。但是，添加后UpdatePanel它DataList不会起作用。任何想法？

标记：

<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如果出现问题，则代码不起作用请纠正代码。

帮助表示赞赏！谢谢！

4

1 回答 1

0

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

function pageLoad() {
$('.someclass').on('click',function(event){});
}
于 2014-09-11T14:01:25.703 回答