2016.02.21

ajax로 엘리먼트를 append 한 후 이벤트리스너를 등록할 때에는

$('body').on('event', 'selector', function() { }); 을 사용한다.

---

youtube api 사용

// API를 로드한다.

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/player_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API로드시 콜백함수

function onYouTubePlayerAPIReady() { }

// 선택된 id값의 엘리먼트를 iframe으로 변경

var player = new YT.Player('id', {

width: value,

height: value,

videoId: id,

playerVars: {

attribute: value

...

...

}

};

playerVars는 https://developers.google.com/youtube/player_parameters?hl=ko#Parameters 에서 확인.

---

이유는 모르겠지만, jquery ajax로 XML을 파싱하는데 

<a>

<b></b>

<c></c>

</a>

<a>

<b>

<c>

</a>

와 같은 구조를 $(xml).find('a').each(function() { }); 으로 하니까 <a>가 한개만 존재할 때에는 작동을 잘 하더니, 2개 이상이 되니까 파서에러가 뜨는 현상이 발생했다. 그리하여

<d>

<a>

<b></b>

<c></c>

</a>

<a>

<b></b>

<c></c>

</a>

</d>

와 같이 d 구조를 하나 추가한 뒤

var foo = $(xml).find('d');

foo.find('a').each(function() { }); 으로 하니까 잘 작동하였다. 이유는 모르겠다...