ASP.NET jQuery 实例10 动态修改hyperlink的URL值
发布时间：2013-06-04 编辑：jiaochengji.com
这节我们来看下如何实现通过选择RadioButtonList值动态改变hyperlink控件的URL值，并简要介绍bind和live方法的区别
这节我们来看下如何实现通过选择RadioButtonList值动态改变hyperlink控件的URL值，并简要介绍bind和live方法的区别
1.先准备界面代码：
<form id="form1" runat="server">
<div align="left">
<fieldset style="width: 300px; height: 200px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 10px">
</td>
<td>
<p>
更新网址:</p>
<asp:RadioButtonList ID="rblUrl" runat="server">
<asp:ListItem Text="新浪" Value="http://www.sina.com.cn"></asp:ListItem>
<asp:ListItem Text="百度" Value="http://www.baidu.com"></asp:ListItem>
<asp:ListItem Text="网易" Value="http://www.163.com"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:HyperLink ID="hyperLink" runat="server">点击这儿</asp:HyperLink>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
2.RadioButtonList转换成<table/>，其成员转换为<input type="radio"/>,下面是实现改变URL值的脚本代码：
<head runat="server">
<title>Recipe10</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=radio]").bind("change", function () {
$("#<%=hyperLink.ClientID %>").attr("href", $(this).val());
});
});
</script>
</head>
3.实现界面效果：
$("input=[type=radio]").live("change", function(){
$("a").attr("href", $(this).val());
});
5.live()和bind()函数的区别：
live()函数可以附加事件到现在的和将来的页面元素上。然而，bind()函数只能把事件附加到已经加载过的页面元素上。
也就是说bind()适合页面静态元素而live()适合页面静态和动态元素。
复制代码 代码如下:
<form id="form1" runat="server">
<div align="left">
<fieldset style="width: 300px; height: 200px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 10px">
</td>
<td>
<p>
更新网址:</p>
<asp:RadioButtonList ID="rblUrl" runat="server">
<asp:ListItem Text="新浪" Value="http://www.sina.com.cn"></asp:ListItem>
<asp:ListItem Text="百度" Value="http://www.baidu.com"></asp:ListItem>
<asp:ListItem Text="网易" Value="http://www.163.com"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:HyperLink ID="hyperLink" runat="server">点击这儿</asp:HyperLink>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
2.RadioButtonList转换成<table/>，其成员转换为<input type="radio"/>,下面是实现改变URL值的脚本代码：
复制代码 代码如下:
<head runat="server">
<title>Recipe10</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=radio]").bind("change", function () {
$("#<%=hyperLink.ClientID %>").attr("href", $(this).val());
});
});
</script>
</head>
3.实现界面效果：
复制代码 代码如下:
$("input=[type=radio]").live("change", function(){
$("a").attr("href", $(this).val());
});
5.live()和bind()函数的区别：
live()函数可以附加事件到现在的和将来的页面元素上。然而，bind()函数只能把事件附加到已经加载过的页面元素上。
也就是说bind()适合页面静态元素而live()适合页面静态和动态元素。
您可能感兴趣的文章：
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
asp.net不能返回上一页的解决方法
ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
Asp.net 页面导航的几种方法
Asp.net 页面导航的几种方法与比较
GridView动态添加列的实现代码
ASP.NET四种页面导航方式的比较与选择
asp.net页面跳转的多种方法
asp.net数据绑定时动态改变值(示例)
jQuery Web Controls ASP.Net
上一篇：ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
下一篇：ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
[关闭]