[jquery]동적으로 추가된 html에 이벤트 핸들러 걸어주기

일반적으로, jquery 클릭이벤트 바인드에 대한 구문은 아래와 같이 실행할 수 있습니다

$(이벤트객체).bind("click", function() {

이벤트처리내용....

});

그런데, 동적으로 추가된 html에선 위의 구문을 쓰니 이벤트가 적용되지 않는 문제가

있었습니다.

한참을 삽질하던 중, 역시나 검색신공을 활용하여 “live“라는 기능을 찾아냈습니다.

“live”를 써서 아래와 같이 이벤트 핸들러를 걸어주시면 됩니다.

$(이벤트객체).live("click", function() {

이벤트처리내용....

});

별 차이는 없고, “bind“와 “live“의 차이만 있을 뿐입니다.

하지만, 이벤트 핸들러가 걸리지 않아 이 소스를 바꿔야하나 고민하던 저에겐 단비같은

기능이네요.

live“기능에 대한 설명은 아래 포스트에 잘 나와있으니 참고하시기 바랍니다.

* 참고 url 

Advertisements

[jquery].data() api 실습

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 테스트 예제

회사 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 &gt; 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에서 찾아볼 수 있다.

[소스코드]