체크박스에서 이벤트 관리하기
jQuery Mobile 은 checkbox들의 change event 를 관찰하고 있습니다. checkbox는 두가지 state 를 가지고 있습니다. (checked or not) 이 이벤트는 사용자가 checkbox를 click 했을 때 나타납니다. click event 이벤트도 있습니다. 하지만 이 click event 이벤트는 아래에서 사용되지 않습니다.
Using the change event on checkboxes
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
<script>
$(":checkbox").bind ("change", function (event)
{
alert ($(this).attr ("checked"));
});
</script>
|
|
tistory486_01.html
왜 click event는 직접적으로 사용되지 않을까요? jQuery Mobile 은 original HTML code를 transform 하는 것을 기억하세요. 그러니까 <input>
element가 아니라 ui-checkbox
CSS class가 있는 <div>
element에서 click event를 receive 하게 됩니다. 그래서 <div>
element에서 일어나는 클릭은 <input>
element 에서 change event를 유발합니다. 그리고 이 change event를 사용하구요.