Javascript AddEventListener issue

Javascript AddEventListener issue

本文关键字：issue AddEventListener Javascript      更新时间：2023-09-26

我有两个选择框，每个框都在带有特定id的span元素中。第一个选择框是国家，另一个是城市列表。当我选择一个国家时，城市选择框容器跨度的innerHtml被ajax函数的响应所取代，一切都很好。但是我想通过使用selectbox的onchange属性来激发一个函数，如果在页面加载开始时addeventListener函数工作正常，但在替换span的innerHtml后它不工作，并且在替换后城市selecbox的id在替换前是相同的。我只是在用。

document.getElementById('to_city').addEventListener('change',doSomething,false);

这个代码是通过加载window元素来初始化的。

它可以在没有ajax替换的情况下工作，但之后就不能了。

用AJAX替换内容时，需要再次绑定事件。因此，最好在替换内容后再次绑定事件。

有一种方法可以避免使用事件冒泡。

JQuery 1.4+支持onchange事件传播，所以您可以使用JQuery委托函数来实现这一点。http://api.jquery.com/delegate/

Jquery只有一行可以完成工作。

$("#container").delegate("#to_city", "change", doSomething); // Workd in all browsers

我忽略了下面例子中的IE，因为您使用的是IE不支持的addEventListener。没有Jquery工作示例（不适用于IE）：http://codebins.com/bin/4ldqpb1/2

document.getElementById("container").addEventListener( 'change', function(e) {
    var targ=e.target;
    if (targ.id == "to_city") { //you just want to capture to_city event
        //DO STUFF FOR SELECT
        //DO STUFF
        doSomething();
        alert("id: " + targ.id + "'nvalue: " + targ.value);
    }
}, false)

说明：

当您绑定任何事件时，它们都绑定到特定的元素，而不是选择器或ID。因此，当您用具有相同ID的新元素替换内容和新替换元素时，新元素不会附加任何事件。所以你需要再次攻击事件。所以若在AJAX内容之后附加事件，则替换doSomething将起作用。但这不是一个很好的解决方案。

我们正在使用事件冒泡概念。许多事件都在文档顶部冒泡。（IE不冒泡更改事件）因此，我们在容器上编写处理程序并侦听事件。每个事件都有一个target或srcElement，它表示哪个dom元素触发了这个事件。如果dom元素是我们要查找的execute函数。在这个can中，我们正在寻找ID为tocity的元素，这就是if条件的原因。

相关文章：