일반적으로, jquery 클릭이벤트 바인드에 대한 구문은 아래와 같이 실행할 수 있습니다
$(이벤트객체).bind("click", function() {
이벤트처리내용....
});
그런데, 동적으로 추가된 html에선 위의 구문을 쓰니 이벤트가 적용되지 않는 문제가
있었습니다.
한참을 삽질하던 중, 역시나 검색신공을 활용하여 “live“라는 기능을 찾아냈습니다.
“live”를 써서 아래와 같이 이벤트 핸들러를 걸어주시면 됩니다.
$(이벤트객체).live("click", function() {
이벤트처리내용....
});
별 차이는 없고, “bind“와 “live“의 차이만 있을 뿐입니다.
하지만, 이벤트 핸들러가 걸리지 않아 이 소스를 바꿔야하나 고민하던 저에겐 단비같은
기능이네요.
“live“기능에 대한 설명은 아래 포스트에 잘 나와있으니 참고하시기 바랍니다.
* 참고 url
jquery api중 “.data()” api가 있습니다.
이 api에 대한 내용은 링크를 참조하시면 됩니다.
대략, api 내용을 보면 .data() api 인자에 key, value를 넣을 수 있고,
key만 넣으면 해당 키에 저장된 값(value)을 넘겨주고 key, value를 함께 지정하면,
해당 key의 value를 지정하게 됩니다.
근데 제가 궁금했던 건,
다른 소스코드를 보던 중 아래와 같은 소스가 뜬금없이 나와서 사용되고 있어서였습니다.
<div id="test_div" data-id="100" data-specify-name="bluepoet">test</div>
위 html의 div요소를 가져오는 자바스크립트에서는 아래와 같이 사용했습니다.
var $dataId = $testDiv.data("id");
var $dataSpecifyName = $testDiv.data("specifyName");
오잉! 먼가 이상하지 않으신가요??
jquery 속성을 가져오는 건 .attr() api를 사용해 풀네임 속성으로 값을 가져오는 것으로
알고 있었는데 갑자기 “data-“가 빠진 “id“만 가지고 오다니요…!
그리고 두번째는 더 심하게 “data-specify-name“이 아닌 “specifyName“만
가져오더군요.
그런데! 여기서 순간! 개발자의 직감으로..
“specifyName“을 쓰는 것을 보니 “뭔가 내가 모르는 네이밍규칙이 있구나“라는 생각이
들었습니다. 그래서 찾아봤더니 허무하게도 .data() api에 해당내용이 나와있더군요.
“data-*“이 html5의 속성이였습니다. 그리고 이것은 jquery 1.4.3 이상에서는
자동으로 jquery data object로 들어간다고 나와있더라구요 ㅎㅎ
html5의 “data-*”속성에 대한 설명은 링크를 참고하세요.
역시 “등잔밑이 어둡구나“라는 옛말이 또 한번 들어맞는 순간이었습니다.
하여튼, 문제를 해결하고 .data() api에 있는 예제를 조금 수정해 “data-*“속성을
테스트해보기로 했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test_div" data-id="100" data-specify-name="bluepoet">A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$(document).ready(function() {
var $testDiv = $("#test_div");
var $dataId = $testDiv.data("id");
var $dataSpecifyName = $testDiv.data("specifyName");
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
$dataId = 1;
$dataSpecifyName = "kim";
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
$dataId = 2;
$dataSpecifyName = "lee";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
$dataId = 3;
$dataSpecifyName = "park";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
$dataId = 4;
$dataSpecifyName = "choi";
break;
}
$("span").text("" + value+ ", data-id : "+ $dataId + ", data-specify-name : " + $dataSpecifyName);
});
});
</script>
</body>
</html>
결과는, 위 그림처럼 data-id와 data-specify-name가 버튼을 누를때마다 다른 값이
나오게 됩니다.
회사 jquery의 each에 대한 소스를 보던 중.. 이해 안가는 부분이 있어 예제를 만들어 보았다.
(1) 먼저 jquery 스크립트가 없는 일반적인 테이블 그림이다.
<table class="test" border="1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table> <pre>
(2) 이걸 each api를 써서 번호를 거꾸로 쓰는 예제를 만들어 보았다.
$(document).ready(function() {
var cnt = 6;
$('.test tr:first td').each(function(k, v) {
$('.test tr').each(function() {
var $table = $(this);
$table.find("td").eq(k).html(cnt);
if(cnt > 3) {
$table.find("td").eq(k).css('background-color', 'red');
}else{
$table.find("td").eq(k).css('background-color', 'yellow');
}
cnt--;
});
});
});
처음엔 머리로만 소스를 이해하려고 하다보니, 왜 왼쪽부터 아래로 내려가며 순번이
매겨질까 한참을 생각하다가, 역시 예제코드를 보며 알게 되었다.
역시 개발자는 백문이 불여일타라는 생각이 다시 들었다.
jquery each api에 대한 링크는 jquery each API에서 찾아볼 수 있다.
[소스코드]
