<html>
<head>
<script src="jquery.js">
<style>
#wrap{
width:300px; height:200px; background:yellow;
}
</style>
</head>
<body>
<button id="btn"> 버 튼 </button>
<div id="wrap"></div>
</body>
<script type="text/javascript">
var g={};
var input = $('<input type="text" />').focus(function(e){
console.log('input focus');
});
g.el = input;
g.wrap = $("#wrap");
$("#btn").click(function(e){
g.wrap.empty().append(g.el);
});
</script>
</html>
<html>
<head>
<script src="jquery.js">
<style>
#wrap{
width:300px; height:200px; background:yellow;
}
</style>
</head>
<body>
<button id="btn"> 버 튼 </button>
<div id="wrap"></div>
</body>
<script type="text/javascript">
var g={};
var input = $('<input type="text" />').focus(function(e){
console.log('input focus');
});
g.el = input;
g.wrap = $("#wrap");
$("#btn").click(function(e){
g.wrap.find("input").detach();
g.wrap.append(g.el);
});
</script>
</html>
이렇게 작성을 하고 실행을하면
버튼이 눌렷을 때 일단 wrap에 있는 input태그르 모드 지운다.
그리고 다시 wrap에 el을 추가를 한다.
포커스를 해보면 포커스가 살아 있는걸 확인 할 수 있다.
'JAVASCRIPT' 카테고리의 다른 글
| user strict를 사용하는 이유 (0) | 2015.11.12 |
|---|---|
| javascript 이미지 확대 팝업 창 (2) | 2015.10.29 |
| jquery 동적 이벤트 추가! (0) | 2015.05.20 |
| jquery timepicker (0) | 2015.04.09 |
| jquery datepickler UI (0) | 2015.04.09 |