jQuery Mobile 13

jQuery Mobile create 이벤트

jQuery Mobile은 플러그인의 집합체입니다. 우리 눈에는 보이지 않지만, 그 뒤에서 jQuery UI 플러그인을 적용하는 것처럼 메서드를 호출해 UI를 구성하는 것입니다. 이러한 것이 우리가 원하지 않는 문제를 야기할 수 있습니다. 어떠한 문제를 야기하는지 예제를 만들어 봅시다. 아래의 소스코드처럼 body 태그를 구성해 주세요.

body 태그 구성

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>MOBILE</h1>
									</div>
									<div data-role="content">
										<button>ADD BUTTON</button>
									</div>
								</div>
							</body>
						

버튼을 누르면 버튼을 새로 만들어 추가합니다.

문서 객체 생성 - 동적 생성

							$(document).bind('pagecreate', function () {
								$('button').click(function () {
									// 문서 객체를 추가합니다.
									$('').appendTo('div[data-role=content]');
								});
							});
						


코드를 실행하고 버튼을 누르면 버튼이 생성됩니다. 동적으로 생성한 문서 객체는 jQuery Mobile의 UI가 적용되지 않습니다.

이렇게 동적으로 생성한 문서 객체는 UI를 강제로 적용해야 합니다. jQuery UI는 각 위젯 객체의 메서드를 호출했는데요. jQuery Mobile은 아래의 코드처럼 해당 태그를 감싼 문서 객체의 create 이벤트를 강제로 호출해야 합니다.

create 이벤트 강제 호출

							$(document).bind('pagecreate', function () {
								$('button').click(function () {
									// 문서 객체를 추가합니다.
									$('').appendTo('div[data-role=content]');
								});

								//create 이벤트를 강제로 호출합니다.
								$('div[data-role=content]').trigger('create');
							});
						


이렇게 create 이벤트를 강제로 호출하면 jQuery Mobile 형태의 버튼이 생성됩니다.
간단한 내용이지만 문서 객체를 동적으로 추가할 때는 정말 중요한 내용이미로 꼭 기억해 주세요.