本帖最后由 wuxiaolan91 于 2012-6-4 11:04 編輯
1.出現(xiàn)問題：
我們一般都是為已經(jīng)存在的元素去綁定事件，那么用同樣的綁定方法也能正確綁定動(dòng)態(tài)創(chuàng)建的元素嗎？
我在我們孔明app的項(xiàng)目里動(dòng)態(tài)創(chuàng)建了一個(gè)元素，然后我又需要為這個(gè)元素綁定事件，要點(diǎn)擊這個(gè)動(dòng)態(tài)創(chuàng)建的元素的時(shí)候能夠在這個(gè)元素的右側(cè)復(fù)制這個(gè)元素出來- $("動(dòng)態(tài)創(chuàng)建的元素").click(function(){
- console.log("事件已被綁定");
- ....
- }
我就奇怪了，動(dòng)態(tài)創(chuàng)建的元素用click事件綁定就不行了嗎？
2.問題分析：
我換了on來綁定事件，結(jié)果還是不行（后來發(fā)現(xiàn)不是不行，而是on綁定這種動(dòng)態(tài)元素得綁定在這個(gè)動(dòng)態(tài)元素的父元素或者祖父元素上，再把這個(gè)動(dòng)態(tài)元素作為參數(shù)傳進(jìn)去），on事件不行了，又開始試live這個(gè)綁定事件，ok，在live這里，綁定成功，測試的console語句出來了，看看api，特別有指出，原來live是可以為現(xiàn)在還未創(chuàng)建的動(dòng)態(tài)元素綁定事件的，而bind事件則只能綁定已經(jīng)存在的元素。
好吧，不多說了上Code吧。- <!doctype html>
- <html>
- <head>
- <title>測試怎么綁定動(dòng)態(tài)元素的詳細(xì)情況</title>
- <body>
-
- <div id="container">
- <button id="addSpan">添加元素</button>
-
- </div>
- <p id="disc">提示語句</p>
- <script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
- <script type="text/javascript">
-
- $("#addSpan").click(function(){
- $("#container").append($("<button id='clickAddEle'>click事件</button>"));
- $("#container").append($("<button id='bindAddEle'>bind</button>"));
- $("#container").append($("<button id='liveAddEle'>live</button>"));
- $("#container").append($("<button id='onAddEle'>on</button>"));
- $("#container").append($("<button id='delegateAddEle'>delegate</button>"));
- });
- //用click方法綁定
-
- $("#clickAddEle").click(function(){
- var tiscContent = "click為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
- $("#bindAddEle").bind("bind",function(){
- var tiscContent = "bind為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
- $("#liveAddEle").live("click",function(event){
- var tiscContent = "live為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
- /*
- $("#liveAddEle").on("click",function(event){
- var tiscContent = "on為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
- */
- $("#container").on("click","#onAddEle",function(event){
- var tiscContent = "on為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
- $("#container").delegate("#delegateAddEle","click",function(event){
- var tiscContent = "delegate為動(dòng)態(tài)元素綁定事件成功1";
- $("#disc").html(tiscContent);
- });
-
-
- </script>
- </body>
- </head>
- </html>
注意，on方法是jQuery1.7才添加進(jìn)去的方法，所以如果你的jQuery版本低于這個(gè)，那么on方法就會(huì)不起作用。
3.問題總結(jié)：
為動(dòng)態(tài)元素綁定事件的話，用click()，bind()，直接為這個(gè)元素綁定on()都不行，要用live()或者delegate()得給這個(gè)元素的上級元素綁定on方法，把這個(gè)元素作為參數(shù)傳進(jìn)去才行。
|
