nahos

appendChild를 사용하여 div를 동적으로 추가해주는 자바스크립트입니다.

<script type="text/javascript">

function add_div(){

    var div = document.createElement('div');

    div.innerHTML = document.getElementById('room_type').innerHTML;

    document.getElementById('field').appendChild(div);

}

function remove_div(obj){

document.getElementById('field').removeChild(obj.parentNode);

}

</script>

아래와 같은 html이 있으면,  추가버튼을 클릭하면 room_type이란 id를 가진 div를 복사하여

field란 id를 가진 div에 생성해주는 소스입니다.

삭제를 눌렀을경우에는 삭제해주는 소스입니다.

<input type="button" value="추가" onclick="add_div()"><br/>

<div id="room_type">

<div class="form-group">

<label for="image">제목</label>

<input type="text" id="title" name="title" class="form-control" ></input>

</div>

<input type="button" value="삭제" onclick="remove_div(this)">

</div>

<div id="field"></div>

append / appendChild / appendTo 등....

위와같은 동적 태그를 사용하여 div를 추가하는 작업을 하였다.

근데 동적으로 추가된 부분에는 일반적인 제이쿼리 이벤트(click / change 등..)가 작동을 하지 않았다.

삽질을 한참 하다가 동적으로 추가된 부분에서는 자바스크립트, 제이쿼리가 작동하지 않는 것을 확인...

원래의 소스이며 일반적으로 사용하는 방식

$("input[type=file]").change(function(){

preview($(this)[0], $(this).attr("class"));

});

동적 태그를 사용한 경우는 아래와 같은 방식을 사용해야 한다.

$(document).on("change","#thum_img",function(){

preview($(this)[0], $(this).attr("class"));

});

on을 사용하는 것이 핵심이며, 

on의 매개변수는 on(이벤트, 이벤트타켓 , 함수)을 사용한다.

(*위의 소스는 이미지 미리보기를 위해 작업을 하는 소스로 방식만 확인)

apmsetup에서 phpmyadmin을 접속하는데 아래와 같은 오류 발생

Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly.

php.ini 파일 수정

session.auto_start = 0 부분을

session.auto_start = 1 로 수정 후 

아파치 재시작