js中的前绑定和后绑定

 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件。在实际开发过程中经常会涉及到前绑定和后绑定。顾名思义,前绑定——还未出生即绑定了某些事件,后绑定——出生后才会绑定的某些事件。
下面,通过一个简单的例子进行阐述,以供大家参考,并对各个方法进行比较:
页面元素:
<div id="main">
<a href="#">aaaaaaaaaaaaaaaaaaaaaa</a><br />
<a href="#">bbbbbbbbbbbbbbbbbbbb</a><br />
<a href="#">ccccccccccccccccccccccccc</a><br />
<a href="#">dddddddddddddddddddd</a><br />
<a href="#">eeeeeeeeeeeeeeeeeeeeee</a><br />
<a href="#">fffffffffffffffffffffffffffffffff</a><br />
<a href="#">gggggggggggggggggggg</a><br />
<a href="#">hhhhhhhhhhhhhhhhhhhh</a>
</div>
<input type="button" value="创建a标签" id="btnCreate" />

页面中的js:
<script src="201102/Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//后绑定,即动态创建的元素不能拥有绑定的事件!!!
//1.后绑定
// $("#main > a ").click(function () {
// alert($(this).html());
// });

//2.后绑定
// $("#main > a").bind("click", function () {
// alert($(this).text());
// });

//3.后绑定,
// $("#main > a").bind({
// click: function () { alert($(this).text()); },
// mouseover: function () { $(this).css("background-color", "red") },
// mouseout: function () { $(this).css("background-color", "white") }
// });
$("#btnCreate").bind({
click: function () { $("<br /><a href='#'>我是动态创建的</a>").appendTo("#main"); }
});

//4.前绑定,动态创建的元素也拥有了点击的事件
// $("#main").delegate("a", "click", function () {
// alert($(this).text());
// });

//5.前绑定,live的事件源头的是documentdelegate的源头是具体要绑定的元素,所以delegate的效率比live高多了
$("#main a").live("click", function () {
alert($(this).text());
});
});
</script>

时间: 2024-10-26 22:46:01

js中的前绑定和后绑定的相关文章

js中的前绑定和后绑定详解

这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下    其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开发过程中经常会涉及到前绑定和后绑定.顾名思义,前绑定--还未出生即绑定了某些事件,后绑定--出生后才会绑定的某些事件. 下面,通过一个简单的例子进行阐述,以供大家参考,并对各个方法进行比较: 页面元素: 复制代码 代码如下: <div id="main"> <a h

怎样在gridview中去掉自动生成字段后绑定数据

问题描述 stringsql="select*fromMusic_tablewhereMusic_singer='"+TextBox6.Text.Trim()+"'andMusic_name='"+TextBox7.Text.Trim()+"'";SqlDataAdaptermydata=newSqlDataAdapter(sql,conn);DataSetmyds=newDataSet();mydata.Fill(myds);GridView2

JS中encodeURIComponent函数用php解码的代码_php技巧

JS中encodeURIComponent函数给中文编码后,如何用php解码?? 前提:编码前的中文可能是gbk,gb2312,utf-8等. 复制代码 代码如下: urldecode() iconv() 在JS中使用了encodeURIComponent对中文进行编码在PHP中使用iconv('UTF-8','gb2312',$q);就可以得到你需要的字串了,其中gb2312根据你实际应用来定如还不明白为什么看下面的文章 URL编码转换,escape() encodeURI() encodeU

javascript-onchange()绑定两个text返回到js中

问题描述 onchange()绑定两个text返回到js中 <li>开始日期</li> <li><input type="text" id="StartTimeq" name="StartTime" onfocus="WdatePicker({isShowClear:true,readOnly:true,dateFmt:'yyyy-MM-dd'})" ></li> &

js中事件绑定,$(&amp;amp;quot;body&amp;amp;quot;).on(&amp;amp;quot;click&amp;amp;quot;)与$(&amp;amp;quot;&amp;amp;quot;).click()区别

问题描述 js中事件绑定,$("body").on("click")与$("").click()区别 <dl> <dt>性别</dt> <dd> <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>男</p> <a href=&quo

excel绑定sqlserver 后,在listobject (tableadapter)中排序并编辑会出问题

问题描述 excel2007,2010都试过用数据源绑定sqlserver后,在listobject(tableadapter)中排序并编辑会出问题(不绑定没事)编辑一行,另一行也会跟着变不排序就没问题.A是主键AB1122334455按B排序后AB5544332211改变B列第一行的值,最后一行跟着变,貌似是排序前的那一行的数值会改变,怎么破?AB522443322122 解决方案 解决方案二:用的vs2010officeexcelworkbook

jQuery中on绑定事件后引发的事件冒泡问题如何解决_jquery

用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

应用-dw中,阶段变量添加后为什么绑定不显示

问题描述 dw中,阶段变量添加后为什么绑定不显示 ADODB.Command 错误 '800a0d5d' 应用程序在当前操作中使用了错误类型的值. /order_ch.asp,行 38 MM_editCmd.Parameters.Append MM_editCmd.CreateParameter(""param5"" 5 1 -1 MM_IIF(Request.Form(""price"") Request.Form(&quo

急!-js中关于银行卡绑定的语句是什么意思,??

问题描述 js中关于银行卡绑定的语句是什么意思,?? 能不能详细的解释图中的语句???他到底什么作用? 解决方案 /s+/g 是正则表达式, s+ 用来匹配1个或多个个空白符(包括空格,制表符,换行符). 这个函数的作用:去除字符串中包含的空白符.即 先查找出this中所包含的所有空白符,再将空白符都替换为空字符串. 使用方法如: var str = " te s t "; var str1 = str.NoSpace(); => str1的值即:test 解决方案二: 给js字