jQuery clone()方法綁定事件

標籤：

先看如下代碼：

 1 (function ($) { 2  3     var div = $("<div></div>").css({width: "100px", height: "100px"}); 4     var colors = ["red", "blue", "yellow"]; 5     for (var c = 0; c < colors.length; c++) { 6         var perDiv = div.clone(); 7         perDiv.css({ 8             background: colors[c] 9         });10         perDiv.click(function () {11             console.log(colors[c]);12         });13         $("body").append(perDiv);14     }15 16 })($);

：

無論點擊那個div都是輸出 underfined

所以此代碼不能解決每個div點擊出現不同的事件。

改進代碼：

 1 (function ($) { 2  3     var div = $("<div></div>").css({width: "100px", height: "100px"}); 4     var colors = ["red", "blue", "yellow"]; 5     for (var c = 0; c < colors.length; c++) { 6         var perDiv = div.clone(); 7         perDiv.css({ 8             background: colors[c] 9         });10         perDiv.addClass("a"+c);11         $("body").append(perDiv);12     }13 14     for (var e=0;e<colors.length;e++){15         $(".a"+e).click(function () {16             console.log($(this));17         });18     }19 })($);

效果：

，每當點擊一個對應就輸出一個資訊。

總結：給每個元素添加個class或id 就行了╮(╯▽╰)╭

jQuery clone()方法綁定事件