1.事件绑定的方式
事件DOM:三种绑定方式jQuery:#前面几种调用的全是on$(‘.c1‘).click()$(‘.c1‘).bind(‘click‘,function(){})$(‘.c1‘).unbind(‘click‘,function(){})$(‘.c1‘).delegate(‘a‘,‘click‘,function(){}) #不同于其它,有委托的作用$(‘.c1‘).undelegate(‘a‘,‘click‘,function(){})$(‘.c1‘).on(‘click‘,function(){})$(‘.c1‘).off(‘click‘,function(){})
2. 由于程序是从上往下执行,所以对新输入的没有绑定alert事件。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<input id="t1" type="text"/> ???<input id="a1" type="button" value="添加"/> ???<ul id="ul"> ???????<li>123</li> ???????<li>456</li> ???</ul> ???<script src="jquery-1.12.4.js"></script> ???<script> ???????$(‘#a1‘).click(function(){ ???????????var v=$(‘#t1‘).val(); ???????????var temp="<li>"+v+"</li>"; ???????????$(‘#ul‘).append(temp); ???????}); ???????$(‘ul li‘).click(function(){ ???????????v=$(this).text(); ???????????alert(v); ???????}) ???</script></body></html>
所以需要重新绑定
3. delegate具有委托的作用,不同于其它几个。
click不行,bind不行,on不行,delegate可以。委托。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<input id="t1" type="text"/> ???<input id="a1" type="button" value="添加"/> ???<ul id="ul"> ???????<li>123</li> ???????<li>456</li> ???</ul> ???<script src="jquery-1.12.4.js"></script> ???<script> ???????$(‘#a1‘).click(function(){ ???????????var v=$(‘#t1‘).val(); ???????????var temp="<li>"+v+"</li>"; ???????????$(‘#ul‘).append(temp); ???????}); ???????$(‘ul‘).delegate(‘li‘,‘click‘,function(){ ???????????v=$(this).text(); ???????????alert(v); ???????}) ???</script></body></html>
jQuery绑定事件
原文地址:http://www.cnblogs.com/momo8238/p/7469738.html