1.jQuery动态添加的源码元素绑定事件处理函数代码
2.jQueryç.bindï¼liveå.delegateçåºå«
3.Jqueryä¸bindåliveçåºå«
4.jquery bind å®ç°ç»å®clickäºä»¶
jQuery动态添加的元素绑定事件处理函数代码
我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的源码jquery已经添加了这个功能。我们已经不需要为此烦恼了。源码Linux构建Qt源码
参考:/live/
以前我们定义事件,源码比如为元素定义单击事件是源码爱分享程序源码这样写的:
复制代码
代码如下:
$('input').click(function
()
{
//处理代码
});
或
复制代码
代码如下:
$('.clickme').bind('click',
function()
{
//
Bound
handler
called.
});
但是这只能是对已经加载好的元素定义事件,那些后来添加插入的源码上涨天数统计源码元素则需要另行绑定。即使你使用jquery的源码clone函数,它并不能将事件也复制(到目前为止我还不清楚它是源码为什么这样定义,是源码没法复制还是刻意这么处理,以防止出现某些异常,源码这还有待去分析一下jquery的源码源代码)。
现在,源码使用live你可以轻松搞定,源码潮汕棋牌源码APP
$('.clickme').live('click',源码
function()
{
//
Live
handler
called.
});这样,你即使在后面动态插入的源码沙盘slg游戏源码元素,也会被绑定事件,$('body').append('<div
class="clickme">Another
target</div>');
jQueryç.bindï¼liveå.delegateçåºå«
ãã.bind()
ãã$('a').bind('click', 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()çå¤çå½æ°æ©å·²è¿è¡äºã
Jqueryä¸bindåliveçåºå«
以clickäºä»¶ä¸ºä¾Jqueryä¸ç»å®äºä»¶æä¸ç§æ¹æ³ï¼
1ãtarget.click(function(){ });
2ãtarget.bind("click",function(){ });
3ãtarget.live("click",function(){ });
liveæ¹æ³ï¼åªæå¨clickäºä»¶åççæ¶åï¼æä¼å»æ£æµç»å®äºä»¶ç对象targetæ¯å¦åå¨ï¼æ以liveæ¹æ³å¯ä»¥å®ç°åæ¥æ°å¢åå ç´ çäºä»¶çç»å®ã
bindä¼å¨äºä»¶å¨ç»å®é¶æ®µbindæ¶å°±ä¼å¤æç»å®äºä»¶ç对象targetæ¯å¦åå¨ï¼èä¸åªé对å½åå ç´ è¿è¡ç»å®ï¼èä¸æ¯ç»å®å°ç¶èç¹ä¸ã
以ä¸ä¸¾ä¾ã
æé®1ä¼è§¦åbindåliveçç»å®äºä»¶ã
æé®2ä¼è§¦åliveçç»å®äºä»¶ãä¸ä¼è§¦åbindçäºä»¶ï¼å 为ç»å®clickäºä»¶çæ¶åæé®2è¿æ²¡æçæã
<script type="text/javascript">$(function () {
$("#btn1").bind("click", function () { alert("bind"); });
$("#btn2").bind("click", function () { alert("bind"); });
$("#btn1").live("click", function () { alert("live"); });
$("#btn2").live("click", function () { alert("live"); })
$("body").append("<span id=\"btn2\">æé®2</span>")
});
</script>
<body>
<span id="btn1">æé®1</span>
</body>
jquery bind å®ç°ç»å®clickäºä»¶
ä½ è¿æ ·ä¸è¡ï¼éé¢çfunction ç¸å½äºå建äºä¸ä¸ªå½æ°ãä½å¹¶æ²¡æè°ç¨ä»ã并ä¸éé¢çthisä¹ä¸æ¯æåå½åclickçå ç´ äºãä½ å¯ä»¥åèä¸é¢ç代ç ã
<div></div>
<script type="text/javascript">
$(function () {
$("div").bind("click", function () {
var me = this;
var a = function () { //å¦ææè¿è¡function(){ $(this).html()}æ¢æ$(this).html()å°±å¯ä»¥
$(me).html(); //è¿æ¯ä¸ºå¥å¢ï¼é¼ æ ç¹å»ä¸å°±æ§è¡functionä¹ï¼æå¨functionéåå®ä¹
};
a(); //ä¸ä¸ªfunctionæä¹å°±ä¸è¡äºå¢ï¼æçåºè¯¥æ§è¡å
}
);
})
</script>