[jQuery] html() done 기능

제이쿼리를 html() 기능을 이용하여 페이지에 요소를 넣은 다음 어떤 기능을 수행해야 하는 경우가 있다.

이때 html() 기능이 완전히 완료된 다음 기능이 수행되면 좋을 때가 있다.

ajax의 경우 $.ajax().done() 의 형태로 그러한 효과를 얻을 수 있다.

html()의 경우 그냥 done()을 붙이면 안되고 promise().done()으로 해야한다.

참고로 이러한 필요성은 CKeditor를 삽입할 때 jquery html() 기능으로 textarea를 넣은 다음 에디터로 변환해주는 기능을 만들 때 done() 기능이 없이는 제대로 되지 않아서 느끼게 되었다.

간단한 사용법은 다음과 같다.

참고로 굳이 저렇게 안해도 잘되는 경우도 있다.

그런데 뭔가 속도가 느릴 때는 잘 안될 수도 있어서 promise().done()을 이용하면 확실할 것 같다.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<div id="result"></div>

<script>
	$(document).ready(function(){
		var html = '';
		html += "<textarea id='editor1'></textarea>";
		html += "<button>submit</button>";
		$("#result").html(html).promise().done(function(){
			CKEDITOR.replace("editor1");
		});
	});
</script>