jQuery克隆性能问题 [英] Jquery clone performnace issue

问题描述

我有下面的代码工作正常，除了一些延迟.第一次在浏览器(IE9)中打开应用程序，然后立即单击addAnotherCard按钮时，它不会立即响应.至少要花8到10秒的时间.我暂停10秒钟，然后尝试单击，然后成功了.

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.

我还观察到，我单击了大约4次，直到将其克隆，然后我验证了cosole.log，并且变量逐渐增加到6，但克隆在屏幕上仅显示了一次.每次单击之后，我可以看到每个部分和控制台日志分别为7、8、9等.因此，我的初始单击(1、2、3、4和5)就消失了.

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.

这是原始代码和以前的帖子，包括JSFiddle.

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));
});
});

演示

如何查找父div属性

有人可以帮忙吗?谢谢！

Could someone help on this please ? Thank you!

推荐答案

下面的代码解决了这个问题.

Below code soved the problem.

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

这篇关于jQuery克隆性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！