jQuery 事件委托

我們?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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末振愿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子弛饭,更是在濱河造成了極大的恐慌冕末,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件孩哑,死亡現(xiàn)場(chǎng)離奇詭異栓霜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)横蜒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門胳蛮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來销凑,“玉大人,你說我怎么就攤上這事仅炊《酚祝” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵抚垄,是天一觀的道長(zhǎng)蜕窿。 經(jīng)常有香客問我,道長(zhǎng)呆馁,這世上最難降的妖魔是什么桐经? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮浙滤,結(jié)果婚禮上阴挣,老公的妹妹穿的比我還像新娘。我一直安慰自己纺腊,他們只是感情好畔咧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揖膜,像睡著了一般誓沸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上壹粟,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天拜隧,我揣著相機(jī)與錄音,去河邊找鬼趁仙。 笑死虹蓄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的幸撕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼外臂,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼坐儿!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宋光,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤貌矿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后罪佳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逛漫,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年赘艳,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了酌毡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片克握。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖枷踏,靈堂內(nèi)的尸體忽然破棺而出菩暗,到底是詐尸還是另有隱情,我是刑警寧澤旭蠕,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布停团,位于F島的核電站,受9級(jí)特大地震影響掏熬,放射性物質(zhì)發(fā)生泄漏佑稠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一旗芬、第九天 我趴在偏房一處隱蔽的房頂上張望舌胶。 院中可真熱鬧,春花似錦岗屏、人聲如沸辆琅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽婉烟。三九已至,卻和暖如春暇屋,著一層夾襖步出監(jiān)牢的瞬間似袁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國打工咐刨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留昙衅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓定鸟,卻偏偏與公主長(zhǎng)得像而涉,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子联予,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5啼县? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,485評(píng)論 1 45
  • 通過jQuery沸久,您可以選燃揪臁(查詢,query)HTML元素卷胯,并對(duì)它們執(zhí)行“操作”(actions)子刮。 jQuer...
    枇杷樹8824閱讀 656評(píng)論 0 3
  • 元旦過后,新年第一篇窑睁。初衷:很多的面試都會(huì)涉及到事件委托挺峡,前前后后也看過好多博文葵孤,寫的都很不錯(cuò),寫的各有千秋沙郭,自己...
    color_小浣熊閱讀 2,315評(píng)論 0 4
  • JavaScript(jQuery)中的事件委托 一:什么是事件委托佛呻? 事件委托是利用事件冒泡,只指定一個(gè)事件...
    你為什么無理取鬧閱讀 359評(píng)論 0 2
  • 選擇器選擇器是jQuery的核心病线。 事件 動(dòng)畫 擴(kuò)展
    wyude閱讀 475評(píng)論 0 1