為動態元素附加事件處理程序

Question

我嘗試為動態元素附加事件處理程序，但失敗了。

這是我的一些代碼。 我希望事件可以通過動態元素調用。 也許javascript提供了自動支持動態元素附加事件的功能，而無需再次綁定它，例如jQuery live或on方法。 我想添加功能以在選擇Magento Sales>訂單>創建新訂單頁面時加載州或省的城市數據，而不必搜索正確的javascript文件並嘗試再次綁定事件。

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 });