DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> JavaScript教程:動態元素綁定事件
JavaScript教程:動態元素綁定事件
編輯:CSS進階教程     

1.出現問題:
我們一般都是為已經存在的元素去綁定事件,那麼用同樣的綁定方法也能正確綁定動態創建的元素嗎?

我在我們孔明app的項目裡動態創建了一個元素,然後我又需要為這個元素綁定事件,要點擊這個動態創建的元素的時候能夠在這個元素的右側復制這個元素出來

$("動態創建的元素").click(function(){
console.log("事件已被綁定");
....
}

可是我用卻沒有半點反應,作為測試用的console語句的話不就是沒出來過,後來經同事提點:你這個(綁定事件的)元素是不是動態創建的?


我就奇怪了,動態創建的元素用click事件綁定就不行了嗎?

2.問題分析:
我換了on來綁定事件,結果還是不行(後來發現不是不行,而是on綁定這種動態元素得綁定在這個動態元素的父元素或者祖父元素上,再把這個動態元素作為參數傳進去),on事件不行了,又開始試live這個綁定事件,ok,在live這裡,綁定成功,測試的console語句出來了,看看api,特別有指出,原來live是可以為現在還未創建的動態元素綁定事件的,而bind事件則只能綁定已經存在的元素。
好吧,不多說了上Code吧。

<!doctype html>
<html>
        <head>
                <title>測試怎麼綁定動態元素的詳細情況</title>
                <body>
                       
                        <div id="container">
                                <button id="addSpan">添加元素</button>
                               
                        </div>
                        <p id="disc">提示語句</p>
                        <script src="http://code.jquery.com/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>"));
                                });
                                //用click方法綁定
                               
                                $("#clickAddEle").click(function(){
                                var tiscContent = "click為動態元素綁定事件成功1";
                                        $("#disc").html(tiscContent);
                                });
                                $("#bindAddEle").bind("bind",function(){
                                var tiscContent = "bind為動態元素綁定事件成功1";
                                        $("#disc").html(tiscContent);
                                });
                                $("#liveAddEle").live("click",function(event){
                                        var tiscContent = "live為動態元素綁定事件成功1";
                                        $("#disc").html(tiscContent);
                                });
                                /*
                                $("#liveAddEle").on("click",function(event){
                                        var tiscContent = "on為動態元素綁定事件成功1";
                                        $("#disc").html(tiscContent);
                                });
                                */
                                $("#container").on("click","#onAddEle",function(event){
                                        var tiscContent = "on為動態元素綁定事件成功1";
                                        $("#disc").html(tiscContent);
                                });
                               
                        </script>
                </body>
        </head>
</html>

這裡的demo你點擊"添加元素"按鈕後,會動態創建幾個按鈕,不同的按鈕對應不同的方法,如果你點擊了那個按鈕後,下面的描述文字有更新就說明你的這個按鈕所代表的綁定事件的方法是游泳的。
注意,on方法是jQuery1.7才添加進去的方法,所以如果你的jQuery版本低於這個,那麼on方法就會不起作用。

3.問題總結:
為動態元素綁定事件的話,用click(),bind(),直接為這個元素綁定on()都不行,要用live(),或者給這個元素的上級元素綁定on方法,把這個元素作為參數傳進去才行。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved