1.jQueryç.bindï¼liveå.delegateçåºå«
jQueryç.bindï¼liveå.delegateçåºå«
ãã.bind()
ãã$('a').bind('click',源码centos的kernel源码 function() { alert("That tickles!") });
ããè¿æ¯æç®åçç»å®æ¹æ³äºãJQueryæ«æææ¡£æ¾åºææç$(âaâ)å ç´ ï¼å¹¶æalertå½æ°ç»å®å°æ¯ä¸ªå ç´ çclickäºä»¶ä¸ã
ãã.live()
ãã$('a').live('click', function() { alert("That tickles!") });
ããJQueryæalertå½æ°ç»å®å°$(document)å ç´ ä¸ï¼å¹¶ä½¿ç¨âclickâåâaâä½ä¸ºåæ°ãä»»ä½æ¶ååªè¦æäºä»¶å泡å°documentèç¹ä¸ï¼å®å°±æ¥ç该äºä»¶æ¯å¦æ¯ä¸ä¸ªclickäºä»¶ï¼ä»¥å该äºä»¶çç®æ å ç´ ä¸âaâè¿ä¸CSSéæ©å¨æ¯å¦å¹é ï¼å¦æé½æ¯çè¯ï¼åæ§è¡å½æ°ã
ããliveæ¹æ³è¿å¯ä»¥è¢«ç»å®å°å ·ä½çå ç´ (æcontext)èä¸æ¯documentä¸ï¼åè¿æ ·ï¼
ãã$('a', $('#container')[0]).live(...);
ãã.delegate()
ãã$('#container').delegate('a', 'click', function() { alert("That tickles!") });
ããJQueryæ«æææ¡£æ¥æ¾$(â#containerâ)ï¼å¹¶ä½¿ç¨clickäºä»¶åâaâè¿ä¸CSSéæ©å¨ä½ä¸ºåæ°æalertå½æ°ç»å®å°$(â#containerâ)ä¸ãä»»ä½æ¶ååªè¦æäºä»¶å泡å°$(â#containerâ)ä¸ï¼å®å°±æ¥ç该äºä»¶æ¯å¦æ¯clickäºä»¶ï¼ä»¥å该äºä»¶çç®æ å ç´ æ¯å¦ä¸CCSéæ©å¨ç¸å¹é ãå¦æ两ç§æ£æ¥çç»æé½ä¸ºççè¯ï¼å®å°±æ§è¡å½æ°ã
ããå¯ä»¥æ³¨æå°ï¼è¿ä¸è¿ç¨ä¸.live()类似ï¼ä½æ¯å ¶æå¤çç¨åºç»å®å°å ·ä½çå ç´ èédocumentè¿ä¸æ ¹ä¸ãç²¾æçJSâer们å¯è½ä¼ååºè¿æ ·çç»è®ºï¼å³$('a').live()
== $(document).delegate('a')ï¼æ¯è¿æ ·å?å¯ï¼ä¸ï¼ä¸å®å ¨æ¯ã
ãã为ä»ä¹.delegate()è¦æ¯.live()好ç¨
ããåºäºå 个åå ï¼äººä»¬é常æ´æ¿æéç¨jQueryçdelegateæ¹æ³èä¸æ¯liveæ¹æ³ãèèä¸é¢çä¾åï¼
ãã$('a').live('click', function() { blah() });
ãã// æè
ãã$(document).delegate('a', 'click', function() { blah() });
ããé度
ããåè å®é ä¸è¦å¿«è¿åè ï¼å 为åè é¦å è¦æ«ææ´ä¸ªçææ¡£æ¥æ¾ææç$(âaâ)å ç´ ï¼æå®ä»¬åæjQuery对象ã尽管liveå½æ°ä» éè¦æâaâä½ä¸ºä¸²åæ°ä¼ é以ç¨åä¹åçå¤æï¼ä½æ¯$()å½æ°å¹¶æªç¥é被é¾æ¥çæ¹æ³å°ä¼æ¯.live()ã
ããèå¦ä¸æ¹é¢ï¼delegateæ¹æ³ä» éè¦æ¥æ¾å¹¶åå¨$(document)å ç´ ã
ããä¸ç§å¯»æ±é¿å¼è¿ä¸é®é¢çæ¹æ³æ¯è°ç¨å¨$(document).ready()ä¹å¤ç»å®çliveï¼è¿æ ·å®å°±ä¼ç«å³æ§è¡ãå¨è¿ç§æ¹å¼ä¸ï¼å ¶ä¼å¨DOMè·å¾å¡«å ä¹åè¿è¡ï¼å æ¤å°±ä¸ä¼æ¥æ¾å ç´ ææ¯å建jQuery对象äºã
ããçµæ´»æ§åé¾è½å
ããliveå½æ°ä¹æºä»¤äººè´¹è§£çãæ³æ³çï¼å®è¢«é¾å°$(âaâ)对象éä¸ï¼ä½å ¶å®é ä¸æ¯å¨$(document)对象ä¸åçä½ç¨ãç±äºè¿ä¸ªåå ï¼å®è½å¤è¯å¾ä»¥ä¸ç§åæ»äººçæ¹å¼æ¥ææ¹æ³é¾å°èªèº«ä¸ãå®é ä¸ï¼ææ³è¯´çæ¯ï¼ä»¥$.live(âaâ,â¦)è¿ä¸å½¢å¼ä½ä¸ºä¸ç§å ¨å±æ§çjQueryæ¹æ³ï¼liveæ¹æ³ä¼æ´å ·æä¹ä¸äºã
ããä» æ¯æCSSéæ©å¨
ããæåä¸ç¹ï¼liveæ¹æ³æä¸ä¸ªé常大ç缺ç¹ï¼é£å°±æ¯å®ä» è½é对ç´æ¥çCSSéæ©å¨åæä½ï¼è¿ä½¿å¾å®åå¾é常çä¸çµæ´»ã
ãã欲äºè§£æ´å¤å ³äºCSSéæ©å¨ç缺ç¹ï¼è¯·åé Exploring jQuery .live() and .die()ä¸æã
ããæ´æ°ï¼æè°¢Hacker Newsä¸çpedalpeteååé¢è¯è®ºä¸çEllsassæéæå å ¥æ¥ä¸æ¥çè¿ä¸èå 容ã
ãã为ä»ä¹éæ©.live()æ.delegate()èä¸æ¯.bind()
ããæ¯ç«ï¼bindçèµ·æ¥ä¼¼ä¹æ´å çæç¡®åç´æ¥ï¼é¾éä¸æ¯å?å¯ï¼æ两个åå 让æ们æ´æ¿æéæ©delegateæliveèä¸æ¯bindï¼
ãã 为äºæå¤çç¨åºéå å°å¯è½è¿æªåå¨äºDOMä¸çDOMå ç´ ä¹ä¸ãå 为bindæ¯ç´æ¥æå¤çç¨åºç»å®å°å个å ç´ ä¸ï¼å®ä¸è½æå¤çç¨åºç»å®å°è¿æªåå¨äºé¡µé¢ä¸çå ç´ ä¹ä¸ã
ãã
å¦æä½ è¿è¡äº$(âaâ).bind(â¦)ï¼èåæ°çé¾æ¥ç»ç±AJAXå å ¥å°äºé¡µé¢ä¸ï¼åä½ çbindå¤çç¨åºå¯¹äºè¿äºæ°å å ¥çé¾æ¥æ¥è¯´æ¯æ æçãèå¦ä¸æ¹é¢liveådelegateåæ¯è¢«ç»å®å°å¦ä¸ä¸ªç¥å èç¹ä¸ï¼å æ¤å ¶å¯¹äºä»»ä½ç®åææ¯å°æ¥åå¨äºè¯¥ç¥å å ç´ ä¹å çå ç´ é½æ¯ææçã
ãã
æè 为äºæå¤çç¨åºéå å°å个å ç´ ä¸ææ¯ä¸å°ç»å ç´ ä¹ä¸ï¼çå¬å代å ç´ ä¸çäºä»¶èä¸æ¯å¾ªç¯éå并æåä¸ä¸ªå½æ°é个éå å°DOMä¸ç个å ç´ ä¸ãæå¤çç¨åºéå å°ä¸ä¸ª(ææ¯ä¸å°ç»)ç¥å å ç´ ä¸èä¸æ¯ç´æ¥æå¤çç¨åºéå å°é¡µé¢ä¸çææå ç´ ä¸ï¼è¿ç§åæ³å¸¦æ¥äºæ§è½ä¸ç好å¤ã
ããåæ¢ä¼ æ
ããæåä¸ä¸ªææ³åçæéä¸äºä»¶ä¼ ææå ³ãé常æ åµä¸ï¼æ们å¯ä»¥éè¿ä½¿ç¨è¿æ ·çäºä»¶æ¹æ³æ¥ç»æ¢å¤çå½æ°çæ§è¡ï¼
ãã$('a').bind('click', function(e) {
ããe.preventDefault();
ãã// æè
ããe.stopPropagation();
ãã});
ããä¸è¿ï¼å½æ们使ç¨liveææ¯delegateæ¹æ³çæ¶åï¼å¤çå½æ°å®é ä¸å¹¶æ²¡æå¨è¿è¡ï¼éè¦çå°äºä»¶å泡å°å¤çç¨åºå®é ç»å®çå ç´ ä¸æ¶å½æ°æä¼è¿è¡ãèå°æ¤æ¶ä¸ºæ¢ï¼æ们çå ¶ä»çæ¥èª.bind()çå¤çå½æ°æ©å·²è¿è¡äºã