html 동적 input 추가 후 팝업 데이터를 부모창에서 받는 방법이 궁금합니다

Question

안녕하세요 질문 하나만 드리겠습니다 .. ㅠ jsp 에서 form 데이터 중 button 을 눌러 '주소 찾기' 하여 팝업 띄우는게 있습니다 주소를 검색 후 주소 클릭 하면 팝업 종료되면서 부모창 input 에 주소가 들어가는 프로세스 인데 opener 로 부모창의 해당 input 에 데이터를 넣으면 되지만 문제는 부모창에서 추가 버튼으로 '주소찾기' 버튼 및 input 폼을 js 로 동적 추가 하면 주소찾기 팝업 종료 후 opener가 undefined 되네요 부모창을 못 찾습니다. 혹시 다른 방법이나 해결법을 아시는 분 계실까요 ? 도움부탁드립니다

kenu,전독시 · Answer

부모창에서 동적으로 추가된 '주소찾기' 버튼과 input 폼이 opener를 찾지 못하는 문제는 일반적으로 동적으로 생성된 요소에 대한 이벤트 핸들러 바인딩 문제와 관련이 있습니다. 이 문제를 해결하기 위해 몇 가지 방법을 제안합니다:이벤트 위임(Event Delegation) 사용: 부모 요소에 이벤트 리스너를 추가하고, 이벤트가 발생할 때 이벤트 타겟을 확인하여 동적으로 추가된 요소에 대한 처리를 수행하는 방법입니다. 이 방법을 사용하면 동적으로 추가된 요소에도 이벤트 핸들러가 적용됩니다.document.addEventListener('click', function(event) { if (event.target.matches('.address-finder-button')) { // 주소찾기 버튼 클릭 시 처리 로직 } }); 직접 이벤트 핸들러 바인딩: 동적으로 추가된 요소에 대해 직접 이벤트 핸들러를 바인딩합니다. 요소가 생성될 때마다 이벤트 핸들러를 바인딩하는 방법입니다.function addAddressFinderButton() { var button = document.createElement('button'); button.className = 'address-finder-button'; button.addEventListener('click', function() { // 주소찾기 버튼 클릭 시 처리 로직 }); document.body.appendChild(button); } jQuery의 .on() 메서드 사용: jQuery를 사용하는 경우, .on() 메서드를 사용하여 이벤트 위임을 통해 동적으로 추가된 요소에 대한 이벤트 핸들링을 수행할 수 있습니다.$(document).on('click', '.address-finder-button', function() { // 주소찾기 버튼 클릭 시 처리 로직 }); from: https://www.phind.com/search?cache=xsi68i0zitiurw0xz85qkbq2

html 동적 input 추가 후 팝업 데이터를 부모창에서 받는 방법이 궁금합니다

1개의 답변

기술 목록