jQuery clone()方法綁定事件

先看如下代碼：

(function ($) {

    var div = $("<div></div>").css({width: "100px", height: "100px"});
    var colors = ["red", "blue", "yellow"];
    for (var c = 0; c < colors.length; c++) {
        var perDiv = div.clone();
        perDiv.css({
            background: colors[c]
        });
        perDiv.click(function () {
            console.log(colors[c]);
        });
        $("body").append(perDiv);
    }

})($);

效果圖：

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

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

改進代碼：

(function ($) {

    var div = $("<div></div>").css({width: "100px", height: "100px"});
    var colors = ["red", "blue", "yellow"];
    for (var c = 0; c < colors.length; c++) {
        var perDiv = div.clone();
        perDiv.css({
            background: colors[c]
        });
        perDiv.addClass("a"+c);
        $("body").append(perDiv);
    }

    for (var e=0;e<colors.length;e++){
        $(".a"+e).click(function () {
            console.log($(this));
        });
    }
})($);

效果：

如圖，每當點擊一個對應就輸出一個信息。

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

 

補充：2016-09-24

先看代碼：

$(function () {

    var colors = ["red", "blue", "green"];
    var div = $("<div></div>").css({width: "100px", height: "100px"});

    for (var i = 0; i < colors.length; i++) {
        var odiv = div.clone();
        $("body").append(odiv);
        odiv.index = i;
        odiv.css({background: colors[odiv.index]});
    }
});

效果圖：

看效果和上面一樣。

這個的好處：沒有添加類名，還實現了  "有分別"

思路：通過給odiv附加個屬性index來保存與其他odiv的不同

感覺這樣寫 高大上 有木有。。

補充：2016-11-30 10:07:36

   var colors = ["red", "blue", "green"];
        var div = $("<div></div>").css({width: "100px", height: "100px"});
        function cloneDiv(num) {
            for (var i = 0; i < num; i++) {
                var odiv = div.clone();
                odiv.css("background", colors[i]);
                $("body").append(odiv);
                odiv.on("click", function () {
                    console.log(this);
                })
            }
        }
        cloneDiv(colors.length);

運用this，實現不同。。