Run!

jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

이 함수는 페이지의 document 요소에 이벤트 핸들러 연결을 할 수 있습니다. 페이지에 동적 컨텐츠를 추가하는 쉬운 방법입니다. 더 많은 정보를 얻기를 원하시면 .on() 함수를 참고하시기 바랍니다.

버젼별로 .live() 함수 기능과 같은 기능을 하는 방법은 아래 처럼 쓰여질 수 있습니다. 이 세가지 이벤트 바인드 함수는 모두 같은 효과를 냅니다.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

출처 : http://findfun.tistory.com/285,  http://api.jquery.com/live/

<div class="name_top name1">

</div>

<div class="name_top name2">

</div>

이런 구조가 있다.

jquery에서 name_top name2만 display:none을 주고 싶다면?

물론 $(".name2").hide();로 쓸 수 있다.( 혹은 id를 주던가.....)

그런데 만약 name2라는 클래스를 가진 div가 페이지 어딘가에 있다면?

name_top name2풀 네임을 써줘야 이 div에만 적용될 것이다.

이럴땐 이렇게  $(".name_top,.name2").hide(); 클래스네임 사이에 쉼표를 주면된다.

appendTo를 이용해 객체를 동적 추가 시  $(document).ready(function() 에 선언해 놓은 이벤트들이 작동하지 않을 수 있다.

예를들어 다음과 같은 코드가 있다.

<ul id="list">

<li class="alert">클릭</li>

<li class="alert">클릭</li>

<li class="alert">클릭</li>

</ul>

<a href="#none" class="add">추가</a>

<script type="text/javascript">

$(document).ready(function() {

$(".alert").click(function() {  

        alert("Hello!");

});

$(".add").click(function() {  

        $("<li class=\"alert\">클릭</li>").appendTo("#list");

});

});

</script>

추가를 클릭할때마다 li태그가 추가가 되는데 기존의 세개 li를 클릭하면 알럿창으로 Hello를 출력하지만

새로 추가된 li를 클릭하면 변화가 없다. 즉 document.ready에서 문서가 로딩될때 있었던 세개의 li에만 클릭이벤트가 적용된 것이다.

그렇다면...새로 추가된 li에 이벤트를 적용하고 싶다면?

live를 추가해주면 된다. 어떻게?

이렇게!

$(".alert").live("click", function(){

alert("Hello!");

});

이놈의 IE가 항상 문제다.

저번에 FormData를 이용하여 간단하게 ajax로 파일업로드를 했는데

테스트를 해보니 ie9 이하에서는 작동을 하지않는다. (부셔버릴꺼야 ㅠㅠ)

또 막 구글구글을 하였으나 ie는 안됨 이라는 글 밖에 안나왔는데 모처럼! 네이버검색으로 건졌다.

바로바로 jquery.form.js 

jquery.form.min.zip

(출처 :  http://malsup.com/jquery/form/#download)

이 플러그인으로 구현해 보니 ie7~9 뿐만아니라 크롬 다 된다.

게다가 이것도 별로 복잡하지 않다!

굉장히 심플한  코드를 알려준 멋진 블로그가 있다 

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax

여기를 보고 따라하면 금방 쉽게할수 있는데....

문제는 jquery 버전이다.

난 1.4.2버전을 쓰고있었는데 이런 하위버전은 먹지 않는다는 것.

1.7.1로 바꿔주었더니 잘된다 아주...ㅠㅠ 이런 삽질은 이제 디폴트.

-----------------------------------

별로 필요없지만... 본문해석 및 편의를 위해 소스도 좀 살짝 고침

-----------------------------------

제목 : jQuery와 ajax를 이용한 multipart/form-data전송

글쓴이 : d.cochran 

작성일 : Wed, 08/14/2013 - 08:04 

내용 : 

ajax와 multipart/form-data를 이용하여 파일전송이 가능합니다. 이를 복잡하게 구현한 많은 사이트들이 존재하지만 사실은 쉽습니다. 이 방법은 약간의 jquery ajax 과정과 FormData()함수를 이용하여 폼데이터들을 가져오는 것을 요구합니다.

다음 방법을 이용하면 당신은 하나 이상의 다중 파일업로드를 할 수 있어요.

일단 폼을 봅시다.

<form method="post" name="frmReview" id="frmReview"> 블로그주소 <input type="text" maxlength="256" id="blog_url" name="blog_url" style="width:400px;" value="http://3mhappyhouse.blog.me/30185320565"/> 대표사진 <input type="file" id="thumb_img" name="thumb_img" /> <input type="submit" value="작성하기"> </form>

위의 폼은 히든필드, username필드 그리고 이미지파일업로드 필드를 가지고 있습니다. 우리의 php페이지에서 처리하도록 전송할겁니다.

자 이제  jQuery와 ajax를 이용한 script부분을 보시죵

$("form#frmReview").submit(function(event){ //disable the default form submission event.preventDefault(); var fd = new FormData($(this)[0]); $.ajax({ url: "action.php", type: "POST", data: fd, async: false, cache: false, contentType: false, processData: false, success: function(data){ alert(data); /* alert(data); if json obj. alert(JSON.stringify(data));*/ } }); return false; });

마지막으로 php에서 처리하는 부분입니다.

/* 파일업로드 */ $img_id = $g4[server_time]; //thumbnail저장 $thumbnail = $_FILES[thumb_img][name]; $thumb_ext = end(explode('.', $thumbnail)); $thumb_savename = $img_id."_thumb.".$thumb_ext; if ($thumbnail) upload_file($_FILES[thumb_img][tmp_name], $thumb_savename, "$g4[path]/data/recipe/review"); $blog_url = $_POST['blog_url'];

사족을 붙이자면

원글에서는 Profile Image: <input name="profileImg[]" type="file" />이렇게 필드이름뒤에 []를 붙였는데 굳이 붙일 필요는 없다는 것이 나의 결론. 괜히 배열이 되어 귀찮다. 그러나 혹시 나중에 동적으로 추가가되는 기능이 구현된다면 필요할지도?

그리고 그 밑에서는 jQuery 함수를 호출할 땐 $대신 $j를 써주면 된다.

($는 프로토타입꺼 ㅋ)