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

attach event handler for dynamic element

本文关键字：事件处理 程序 动态 元素      更新时间：2023-09-26

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

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

window.addEventListener（'load'， function（）{    函数 getCity（）{        id= this.selectedIndex;        名称= 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 事件 = 新事件（"更改"）;    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）;});

谢谢吨

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

由于目标元素是动态添加的，因此您可以做的是将更改事件处理程序注册到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);
    }
});

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

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

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

相关文章：