jQuery에서 동적으로 추가된 <input> 요소에서 외부 함수를 호출하는 방법은 여러 가지가 있습니다. 주로 다음과 같은 방법을 사용할 수 있습니다.
1. on()을 사용한 이벤트 위임
동적으로 생성된 요소는 기존 요소에 직접 이벤트를 바인딩할 수 없으므로, on()을 사용하여 부모 요소에서 이벤트를 위임해야 합니다.
예제: 동적으로 추가된 input에서 외부 함수 호출
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 동적 input</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="addInput">입력창 추가</button>
<div id="container"></div>
<script>
// 외부 함수 정의
function externalFunction(value) {
alert("입력된 값: " + value);
}
$(document).ready(function () {
// 입력창 동적 추가
$("#addInput").on("click", function () {
$("#container").append('<input type="text" class="dynamic-input" placeholder="값을 입력하세요">');
});
// 동적으로 추가된 input에서 이벤트 감지
$(document).on("input", ".dynamic-input", function () {
let value = $(this).val();
externalFunction(value); // 외부 함수 호출
});
});
</script>
</body>
</html>2. change() 이벤트 사용
입력값이 변경된 후 외부 함수를 실행할 수도 있습니다.
$(document).on("change", ".dynamic-input", function () {
externalFunction($(this).val());
});3. keyup() 이벤트 사용
사용자가 입력할 때마다 외부 함수를 실행할 수도 있습니다.
$(document).on("keyup", ".dynamic-input", function () {
externalFunction($(this).val());
});정리
- 동적으로 추가된 요소에서는 이벤트 위임 (on()) 을 사용해야 합니다.
- 입력값 변경 시 input, change, keyup 등의 이벤트를 활용할 수 있습니다.
- externalFunction(value)을 호출하여 동적으로 입력된 값을 외부 함수에서 처리할 수 있습니다.
#jquery #동적으로추가 #외부함수추가
반응형
'프로그램' 카테고리의 다른 글
| jquery div로 구성하되 조건에 따라 초기 필드를 설정하고, 추가 및 삭제 기능을 구현 (0) | 2025.03.27 |
|---|---|
| iframe이나 동적으로 생성한 div 내부에서 마우스 좌표값을 얻는 방법 (0) | 2025.03.25 |
| jquery 부모페이지에서 아이프레임 특정 클래스에 클래스 추가 및 여러 속성 값 추가 하기 (0) | 2025.03.23 |
| JavaScript에서 랜덤 난수를 생성하는 방법 (0) | 2025.03.21 |
| JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경 (0) | 2025.03.19 |
댓글