1

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

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

此代码由窗口元素的 onload 初始化。

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

4

1 回答 1

1

当您用 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 元素是我们正在寻找的执行函数。在这个我们可以寻找 ID 为 to_city 的元素，这就是 if 条件的原因。

于 2012-07-11T01:28:24.763 回答