SeouliteLab

jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리 본문

프로그래밍

jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리

Seoulite Lab 2024. 4. 3. 13:10

live() 메서드는 이전 버전의 jQuery에서 사용되었으나 현재는 on() 메서드로 대체되었습니다. 이전 버전의 jQuery를 사용하는 경우에는 live() 메서드로 이벤트 위임을 구현할 수 있습니다. 이를 통해 동적으로 추가되는 요소에도 이벤트를 바인딩할 수 있습니다.

예제 1: 동적으로 추가된 요소에 클릭 이벤트 바인딩하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .live() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.dynamic-container').append('<button class="dynamic-button">클릭하세요</button>');
      $('.dynamic-button').live('click', function(){
        alert('동적으로 추가된 버튼이 클릭되었습니다.');
      });
    });
  </script>
</head>
<body>
  <div class="dynamic-container">
    <!-- 동적으로 추가될 요소가 포함될 컨테이너 -->
  </div>
</body>
</html>

설명: 이 예제에서는 초기에 존재하지 않는 요소에 클릭 이벤트를 바인딩합니다. 새로 추가된 요소에도 클릭 이벤트가 작동합니다.

예제 2: 동적으로 추가된 리스트 아이템 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .live() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.dynamic-list').append('<li class="dynamic-item">항목 추가됨</li>');
      $('.dynamic-item').live('mouseenter', function(){
        $(this).css('color', 'red');
      });
      $('.dynamic-item').live('mouseleave', function(){
        $(this).css('color', 'black');
      });
    });
  </script>
</head>
<body>
  <ul class="dynamic-list">
    <!-- 동적으로 추가될 리스트 아이템들 -->
  </ul>
</body>
</html>

설명: 이 예제에서는 동적으로 추가된 리스트 아이템에 마우스를 올리면 텍스트 색상이 빨간색으로 변경되고, 마우스를 떼면 다시 검은색으로 변경됩니다.

예제 3: 동적으로 추가된 요소에 키보드 이벤트 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .live() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.dynamic-input-container').append('<input type="text" class="dynamic-input">');
      $('.dynamic-input').live('keyup', function(){
        console.log($(this).val());
      });
    });
  </script>
</head>
<body>
  <div class="dynamic-input-container">
    <!-- 동적으로 추가될 입력 요소 -->
  </div>
</body>
</html>

설명: 이 예제에서는 동적으로 추가된 입력 요소에 키보드 입력이 발생할 때마다 입력된 값을 콘솔에 출력합니다.

예제 4: 동적으로 추가된 요소에 이벤트 위임하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .live() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).on('click', '.dynamic-link', function(){
      alert('동적으로 추가된 링크가 클릭되었습니다.');
    });
    $(document).ready(function(){
      $('.container').append('<a href="#" class="dynamic-link">클릭하세요</a>');
    });
  </script>
</head>
<body>
  <div class="container">
    <!-- 동적으로 추가될 요소를 포함할 컨테이너 -->
  </div>
</body>
</html>

설명: 이 예제에서는 동적으로 추가된 요소에 이벤트 위임을 적용하여 클릭 이벤트를 처리합니다.

예제 5: 동적으로 추가된 요소 제거하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .live() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).on('click', '.remove-button', function(){
      $(this).closest('.dynamic-container').remove();
    });
    $(document).ready(function(){
      $('.container').append('<div class="dynamic-container"><button class="remove-button">삭제</button></div>');
    });
  </script>
</head>
<body>
  <div class="container">
    <!-- 동적으로 추가될 요소를 포함할 컨테이너 -->
  </div>
</body>
</html>

설명: 이 예제에서는 동적으로 추가된 요소를 삭제하는 버튼을 만들고, 클릭 시 해당 요소를 제거합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .mousedown() 메서드 이해하기: 마우스 클릭 이벤트 처리  (0) 2024.04.03
jQuery .load() 메서드: 외부 콘텐츠 동적으로 불러오기  (0) 2024.04.03
jQuery .keyup() 메서드 이해하기: 키보드 입력 종료 이벤트 처리하기  (0) 2024.04.03
jQuery .keypress() 메서드 이해하기: 키 입력 이벤트 처리하기  (0) 2024.04.03
jQuery .keydown() 메서드 이해하기: 키보드 이벤트 처리하기  (0) 2024.04.03
'프로그래밍' Related Articles more