Question

我在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时工作正常：

时的脚本脚本

$('.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){});
}

Click事件在asp.net中使用Jquery控件在更新面板中时不会触发？

1 个答案: