Jquery clone performnace issue

Question

I have below code working fine except some delay. When firsttime opened the application in browser(IE9) and then immediartely click addAnotherCard button, it is not responding immediately. It is taking at least 8-10 sec.I pause 10 sec and tried clicking then it worked.

I also observed, I clicked about 4 times untill it cloned, then i have verified cosole.log and the vriables are geting increased to 6 but cloning showed only once on the screen. After tha tevery click, i can see each section and console log as 7,8,9 etc. So my intial clicks (1,2,3,4 and 5) are disappeared.

Here is the original code and previous post including 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

Could someone help on this please ? Thank you!

I see now why you are nesting it but you should forget about using IDs here and instead delegate event using .on() with a class, not useless IDs — A. Wolff, Feb 05 '14 at 14:01
Hi Wolff, Code Moaverick helped me almost 80% of the code. I am very new to Jquery. Could you show me a smaple what you are talking about ? — user3067524, Feb 05 '14 at 14:04

score 0 · Accepted Answer · answered Feb 07 '14 at 18:31

0

Below code soved the problem.

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

answered Feb 07 '14 at 18:31

user3067524

506
4
10
26

Jquery clone performnace issue

1 Answers1

Linked