我有三个divdiv1,div2div3，每个 div1,div2div3 都包含DataList控件div。当我单击项目时，DataList1将DataList2在 .UpdatePanel 中异步加载div2。
问题：
当我点击控制DataList2并尝试访问Clicked Control Class使用jquery它不会触发Click事件。任何想法？
样本输出：
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
})
});