我們?cè)诮壎ㄊ录r(shí)(比如點(diǎn)擊事件)统扳,只能綁定在HTML頁面已有的元素上(比如下方html里的
上),當(dāng)使用jQuery創(chuàng)建新的div元素時(shí),新的元素便沒有這個(gè)事件衔掸,如果我想還有,那怎么辦俺抽,這里就得用到事件委托敞映。
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>jQuery事件委托</title>
? ? <script src="jquery.js"></script>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? ? ? border:1px solid #fff;
? ? ? ? ? ? background:red;
? ? ? ? ? ? margin:5px;
? ? ? ? ? ? float:left;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <form action="">
? ? ? ? <input type="button" value="點(diǎn)擊增加div" id="btn">
? ? </form>
? ? //原有的div元素
? ? <div id="div1"></div>
? ? <script>
? ? //點(diǎn)擊創(chuàng)建新的div元素
? ? ? ? $('#btn')? .click(function(){
? ? ? ? ? ? $('<div></div>').appendTo($('body'));
? ? ? ? })
? ? //為元素附上點(diǎn)擊事件,當(dāng)點(diǎn)擊元素時(shí)磷斧,背景顏色改變,對(duì)新添加元素?zé)o效
? ? ? ? $('div').click(function(){
? ? ? ? ? ? $(this).css('background','green');
? ? ? ? })
? ? // 事件委托
? ? ? ? $(document).on('click','div',function(){
? ? ? ? ? ? $(this).css('background','green');
? ? ? ? })
? ? </script>
</body>
</html>