동적 요소에 이벤트 처리기를 연결하십시오.

Question

동적 요소에 대한 이벤트 처리기를 연결하려고했지만 연결에 실패했습니다.

내 코드는 다음과 같습니다. 나는 이벤트가 동적 요소에 의해 호출되기를 원한다. javascript는 동적 요소에 대한 attach 이벤트를 자동으로 jQuery live 나 method와 같이 다시 바인딩하지 않고 자동으로 지원하는 기능을 제공합니다. Magento Sales> Order> Create New Order Page에 주 또는도를 선택한 상태에서 올바른 자바 스크립트 파일을 검색하고 이벤트를 다시 바인딩하지 않고 도시 데이터를로드하는 기능을 추가하고 싶습니다.

 
window.addEventListener('load', function(){ 
    function getCity(){ 
     id= this.selectedIndex; 
     name= this.name; 
     getKota(id, name); 
    } 

    billing_address_region_id= document.getElementsByName('order[billing_address][region_id]'); 
    shipping_address_region_id= document.getElementsByName('order[shipping_address][region_id]'); 

    var event = new Event('change'); 
    billing_address_region_id[0].addEventListener('change', getCity, false); 
    shipping_address_region_id[0].addEventListener('change', getCity, false); 
    billing_address_region_id[0].dispatchEvent(event); 
    shipping_address_region_id[0].dispatchEvent(event); 
}); 

감사

Answer 1

참고 :이 솔루션은 테스트되지 않은 상태입니다.

대상 요소가 동적으로 추가 된 이후로 수행 할 수있는 작업은 변경 이벤트 처리기를 window에 등록한 다음 대상 요소가 변경 작업을 실행했는지 확인하는 것입니다.

window.addEventListener('change', function (e) { 
    var el = e.target; 
    if (el.name == 'order[billing_address][region_id]' || el.name == 'order[shipping_address][region_id]') { 
     getKota(el.selectedIndex, el.name); 
    } 
}); 

Answer 2

귀하의 코드는 이미 존재하는 요소에 대해서만 작동 것이다 톤. jQuery 사용을 권장한다.

jQuery를 사용하면 "on"메소드를 사용할 수 있습니다.

$('#elem').on('change', function(){ 
 
    // Do stuff 
 
});