Jquery克隆performnace問題

我有下面的代碼工作正常，除了一些延遲。當第一次在瀏覽器（IE9）中打開應用程序，然後立即單擊addAnotherCard按鈕時，它不會立即響應。它至少需要8-10秒。我暫停10秒，然後嘗試點擊，然後運行。Jquery克隆performnace問題

我也觀察到，我點擊了大約4次直到它克隆，然後我驗證了cosole.log和vriables geting增加到了6，但是克隆只在屏幕上顯示了一次。在點擊後，我可以看到每個部分和控制檯日誌爲7,8,9等。所以我的初始點擊（1,2,3,4和5）消失。

這是原始代碼和以前的帖子，包括JSFiddle。

$('#AddCC').click(function() { 

uniqueId++; 

var container = $("#CCcontainer"), 
    hidden = $("#hiddenStoredPanelsArray"), 
    storedPanels = hidden.length ? $.parseJSON(hidden.val()) : null, 
    copyDiv = $("#CCPanel").clone(), 
    divID = "CCPanel" + uniqueId, 
    removeID = "RemoveCard" + uniqueId; 

console.log(storedPanels); 
storedPanels.push(uniqueId); 
hidden.val(JSON.stringify(storedPanels)); 
console.log(storedPanels); 

copyDiv.attr('id', divID); 

container.append(copyDiv); 
container.append("<div id =" + removeID + " ><div class =\"form-group col-sm-10\"></div><div class =\"form-group col-sm-2\"><button id=\"btn" + removeID + "\" type=\"button\" class=\"btn btn-warning form-control\">Remove Card</button></div></div>"); 

$('#' + divID).find('input,select').each(function() { 
    $(this).attr('id', $(this).attr('id') + uniqueId); 
}); 

$("#" + removeID).find("button").on("click", function() { 
    var id = parseInt($(this).attr("id").replace("btnRemoveCard", "")), 
     hidden = $("#hiddenStoredPanelsArray"), 
     storedPanels = hidden.length ? $.parseJSON(hidden.val()) : null, 
     index = storedPanels == null ? -1 : storedPanels.indexOf(id); 

    console.log(storedPanels); 
    if (index > -1) 
     storedPanels.splice(index, 1); 
    console.log(storedPanels); 

    container.find("div[id$='" + id.toString() + "']").remove(); 
    hidden.val(JSON.stringify(storedPanels)); 
}); 
});

DEMO

How to find attribute of parent div

可能有人在這方面的幫助嗎？謝謝！

來源

2014-02-05 user3067524

你爲什麼要嵌套點擊處理程序？ –

你能具體嗎？ – user3067524

我現在看到你爲什麼要嵌套它，但你應該忘記在這裏使用ID，而是使用.on（）與類分派事件，而不是無用ID –

下面的代碼解決了這個問題。

if(!(window.console && console.log)) { 
console = { 
    log: function(){}, 
    debug: function(){}, 
    info: function(){}, 
    warn: function(){}, 
    error: function(){} 
    }; 
}

來源

2014-02-07 18:31:53 user3067524

Jquery克隆performnace問題

回答

相關問題