为动态元素附加事件处理程序

Question

我尝试为动态元素附加事件处理程序但失败了。

这是我的一些代码。我希望事件可以被动态元素调用。也许 javascript 提供功能来自动支持动态元素的附加事件，而无需再次绑定它，例如 jQuery live 或 on 方法。我想在 Magento 销售 > 订单 > 创建新订单页面选择州或省时添加加载城市数据的功能，而无需搜索正确的 javascript 文件并再次尝试在其上绑定事件。

window.addEventListener('load', 函数(){
    函数 getCity(){
        编号= this.selectedIndex;
        姓名= this.name;
        getKota(id, 名字);
    }

    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(事件);
    shipping_address_region_id[0].dispatchEvent(事件);
});

非常感谢

Answer 1

您的代码仅适用于已经存在的元素。我建议使用 jQuery.

使用jQuery，可以使用"on"方法。

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

Answer 2

注意：此解决方案未经测试。

由于目标元素是动态添加的，您可以做的是向 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);
    }
});

为动态元素附加事件处理程序

attach event handler for dynamic element

javascript

magento