Событие Click Не запускается, когда элемент управления находится в панели обновления с помощью JQuery в asp.net?

У меня есть элемент управления в DataList say 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 style="height:164px;">
 <li><a href="#url">
 </a><div><a href="#url">
 <asp:imagebutton id="ImgDeviceImageLevel2" commandname="ImgButtonLevel2" commandargument="<%# Eval(" carrierid")="" %="">" imageurl="<%# Eval("CarrierImg") %>" alt="" rowid="<%# Container.ItemIndex + 1 %>" title="<%# Eval("Carrier") %>" runat="server">
 <div>
 <asp:label id="lblDisplayText" runat="server" text="<%# Eval(" carrier")="" %="">">
 </asp:label></div>
 </asp:imagebutton></a></div></li>
 </ul>
 </asp:hiddenfield></itemtemplate>
 </asp:datalist>
 <asp:label id="lbltest" runat="server" text="Hello" width="114" height="20" visible="false">
 </asp:label></contenttemplate>
 </asp:updatepanel>

JQuery script, когда UpdatePanel Removed отлично работает:

$('.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 не работает с правильным кодом PLZ, если что-то не так.

Помогите оценить! Спасибо!

1 ответ

re присоединяйте событие к событию pageLoad в javascript при работе с панелями обновлений

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

licensed under cc by-sa 3.0 with attribution.