如何获得使用Jquery时控制在UpdatePanel中在asp.net中单击事件？ [英] How to get click event using Jquery when control is in UpdatePanel in asp.net?
本文介绍了如何获得使用Jquery时控制在UpdatePanel中在asp.net中单击事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在每个 DIV DIV DIV1，div2div3含的DataList 控制code>。当我在 DataList1 有关项目则点击 DataList2 将异步加载这在 DIV2中的UpdatePanel 。
问题：
当我点击控制在 DataList2 并尝试使用访问点击的控件类 jQuery的它不会触发点击事件。任何想法？
示例输出：
jQuery脚本：
$（'。imgOpaLevel2'）。点击（函数（）{
警报（HI）;
//没有能够得到这个消息DIV2这是对的UpdatePanel点击DataList2时}
下面是ASP.NET标记：
＆LT; DIV ID =divLevel1级=大旗秒＆GT;
＆LT; DIV CLASS =大旗-BG-条＆GT; ＆LT; ASP：DataList控件ID =dtDevice=服务器DataKeyField =的DeviceID的DataSourceID =sqlDeviceList
RepeatColumns =5RepeatDirection =水平ItemStyle-VerticalAlign =顶部
OnItemCreated =dtDevice_ItemCreatedOnItemCommand =dtDevice_ItemCommand＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：HiddenField ID =hdnDeviceID=服务器值='＆LT;％＃的eval（TronixDeviceID）％＆GT;' /＆GT;
＆LT; UL类=无样式clearfix iphone横幅-IMG-秒＆GT;
＆LT;立GT;＆LT; A HREF =＃网址＆GT;
＆LT; DIV CLASS =横幅IMG-秒＆GT;
＆LT; ASP：ImageButton的ID =ImgDeviceImage的ImageUrl ='＆LT;％＃的eval（DeviceImage）％＆GT;'的CommandName =类别IDCommandArgument ='＆LT;％＃的eval（类别ID）％＆GT;'类=imgOpaLevel1
ALT =的RowID ='＆LT;％＃Container.ItemIndex + 1％＆GT;'标题='＆LT;％＃的eval（设备名称）％＆GT;'
=服务器WIDTH =109HEIGHT =196/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =大旗-PRO-IMG-TXT＆GT;
＆LT; ASP：标签ID =lblDisplayText=服务器文本='＆LT;％＃的eval（设备名称）％＆GT;' WIDTH =114
高度=20/＆GT;
＆LT; / DIV＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：DataList控件＆GT;
＆LT; ASP：SqlDataSource的ID =sqlDeviceList=服务器的ConnectionString =＆LT;％$的ConnectionStrings：MyConnString％＆gt;中
的SelectCommand =p_GetDeviceListSelectCommandType =StoredProcedure的＆GT;
＆LT; SelectParameters＆GT;
＆LT; ASP：参数默认值=1NAME =类别ID类型=的Int32/＆GT;
＆LT; / SelectParameters＆GT;
＆LT; / ASP：SqlDataSource的＆GT; ＆LT; / DIV＆GT; ＆LT; DIV CLASS =容器的相对位置margintop_25＆GT;
＆LT; DIV ID =divLevel2级=iphone-制表主秒的风格=显示：无;＆GT;
＆LT; DIV ID =divtopArrow级=输入制表箭头的iPhone＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =fadediv级=iphone-制表秒iphone5-2秒＆GT;
＆LT; ASP：的UpdatePanel =服务器ID =updatePanelLevel2＆GT;
＆LT;＆触发器GT;
＆LT; /触发器＆GT;
＆LT;＆的ContentTemplate GT;
＆LT; ASP：DataList控件ID =dlCarreirList=服务器DataKeyField =CarrierID
RepeatColumns =5RepeatDirection =水平
ItemStyle-VerticalAlign =评出的onitemcreated =dlCarrerList_ItemCreated＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：HiddenField ID =hdnCarrerID=服务器值='＆LT;％＃的eval（CarrierID）％＆GT;' /＆GT;
＆LT; UL类=无样式clearfix的风格=高度：164px;＆GT;
＆LT;立GT;＆LT; A HREF =＃网址＆GT;
＆LT; DIV CLASS =iphone5-2-PRO-IMG＆GT;
＆LT; ASP：ImageButton的ID =ImageButton1的ImageUrl ='＆LT;％＃的eval（CarrierImg）％＆GT;'类=imgOpaLevel2
ALT =的RowID ='＆LT;％＃Container.ItemIndex + 1％＆GT;'标题='＆LT;％＃的eval（承运人）％GT;'
=服务器/＆GT;
＆LT; DIV CLASS =iphone-PRO-IMG-TXT＆GT;
＆LT; ASP：标签ID =lblDisplayText=服务器文本='＆LT;％＃的eval（承运人）％GT;/＆GT;
＆LT; / DIV＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：DataList控件＆GT;
＆LT; ASP：标签ID =lbltest=服务器文本=你好WIDTH =114HEIGHT =20可见=假/＆GT;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;＆LT; DIV ID =Level3的＆GT;＆LT; / DIV＆GT;
在.cs文件：
保护无效dtDevice_ItemCreated（对象发件人，DataListItemEventArgs E）
{
无功控制= e.Item.FindControl（ImgDeviceImage）;
ScriptManager.GetCurrent（页）.RegisterAsyncPostBackControl（对照组）;
}
保护无效dtDevice_ItemCommand（对象源，DataListCommandEventArgs E）
{
lbltest.Text =HI;
INT类别id = 0;
如果（e.CommandName！= NULL）
{
如果（e.CommandName ==类别ID）
{
类别id = Convert.ToInt32（e.CommandArgument）;
GetCarrerMasterList（类别id）;
}
}
}
保护无效dlCarrerList_ItemCreated（对象发件人，DataListItemEventArgs E）
{
无功控制= e.Item.FindControl（ImageButton1）;
ScriptManager.GetCurrent（页）.RegisterAsyncPostBackControl（对照组）;
}
保护无效GetCarrerMasterList（INT类别ID）
{
iPhoneBiz Objiphone =新iPhoneBiz（）;
Objiphone.CarrierID =类别ID; 数据表dtCarrierList = Objiphone.GetTronixCarrierList（）;
如果（dtCarrierList =空＆放大器;！＆放大器; dtCarrierList.Rows.Count大于0）
{
dlCarreirList.DataSource = dtCarrierList;
dlCarreirList.DataBind（）;
}
}
更新：
的$（document）。在（'的mouseenter'，'.imgOpaLevel2'，函数（）{
警报（iElement ID：+本）;
。$（'。imgOpaLevel2'）停止（）动画（{不透明：1.0}，200）;
$（这）.hover（
功能（）{
。$（'。imgOpaLevel2'）停止（）动画（{不透明：0.5}，200）;
$（本）.stop（）动画（{不透明：1.0}，200）;
如果（selectedImgIDLevel2！= NULL）{ 。$（'。imgOpaLevel2'）停止（）动画（{不透明：0.5}，200）; $（＃+ selectedImgIDLevel2）.stop（）动画（{不透明：1.0}，200）;
}
其他{ //没有
}
}，
功能（）{ 如果（selectedImgIDLevel2 == NULL || selectedImgIDLevel2 ==未定义）{
。$（'。imgOpaLevel2'）停止（）动画（{不透明：1.0}，200）;
} //这将重置鼠标移开透明度 }）
}）;
解决方案
当你动态地加载新的控件，那么你需要点击事件作为绑定使用jQuery的 http://api.jquery.com/live/
这样的：
$（'＃divLevel2'）。在（'点击'，'.imgOpaLevel2'功能（E）{
警报（HI）;
}）;
I have three div div1,div2div3 containing DataList control in each div. When i click on item in DataList1 then DataList2 will be loaded asynchronously which in UpdatePanel of div2.
Problem:
When i click on control in DataList2 and try to access the Clicked Control Class using jquery it wont fire the Click event. Any idea?
Sample output:
Jquery Script:
$('.imgOpaLevel2').click(function() {
alert("hi");
//not able to get this message when clicked on DataList2 in div2 which is in updatepanel
}
Here is the ASP.NET Markup:
<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>
In .cs file:
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();
}
}
Updated:
$(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
})
});
解决方案
when you dynamicly loading new Controls then you need to bind your click Event as live event with jQuery http://api.jquery.com/live/
like:
$('#divLevel2').on('click', '.imgOpaLevel2', function (e) {
alert("hi");
});
这篇关于如何获得使用Jquery时控制在UpdatePanel中在asp.net中单击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
