Jquery 클론 performnace 문제

일부 지연을 제외하고 아래 코드는 정상적으로 작동합니다. 처음 브라우저 (IE9)에서 응용 프로그램을 연 다음 바로 바로 addAnotherCard 버튼을 클릭하면 즉시 응답하지 않습니다. 적어도 8-10 초가 걸립니다. 10 초를 멈추고 클릭 한 후 효과가있었습니다.Jquery 클론 performnace 문제

나는 또한 복제 할 때까지 약 4 번 클릭하고 cosole.log를 확인했으며 vriables는 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 문제

답변

관련 문제