element.innerHTML 更改后 mootools 事件侦听器消失

Question

我整理了一个页面，将显示一组存储的值。我使用 mootools 和 AJAX 调用来更新值，而无需在用户每次从下拉菜单中选择新项目时刷新页面。

HTML 的每一行看起来像这样：

<div class="selections">
<input class="checkbox selector" type="checkbox" CHECKED />

<span class="b_name">
    <select class="b_n selector">
        <!-- options -->
    </select>
</span>

<span class="b_level">

    <select class="b_l selector">
        <!-- options -->
    </select>

</span>

<span class="values">
    <!-- the values -->
</span>
</div>

在头部我设置了一个事件侦听器，例如：

$$('.selector').addEvent('change', function(event){changeValues(this);});

我的问题是，当 "b_name" 选择更改时，我必须更新 中的选项列表>“b_level” 选择。我通过另一个页面上的 PHP 脚本从数据库获取可能选项的列表并替换 "b_level" 的 innerHTML 来实现这一点。一旦我这样做，附加到“b_l选择器”的事件侦听器就不再起作用。

我尝试通过每次 "b_name" 更改时显式地将事件侦听器附加到 "b_l 选择器" 来解决此问题，如下所示：

row.getElement('.b_l').addEvent('change', function(event){changeValues(row.getElement('.b_l'));});

其中 'row' 是 html 元素 'div .选择'。

它仍然不起作用，我不知道发生了什么事。任何人都可以提供有关如何解决此问题的建议吗？或者也许是做我正在做的事情的更好方法。

Answer 1

这就是 JavaScript 的工作原理，它不是错误。

您需要使用的是元素委托 - 将事件附加到父元素，同时指定事件应委托给的元素。

以下是元素委托实际操作的基本示例：http://jsfiddle.net/ oskar/ENR3E/

以及文档：http ://mootools.net/docs/more/Element/Element.Delegation

Answer 2

当您在元素上设置 innerHTML 时，该元素的内容将被完全清除并替换为一组新的元素 - 从 innerHTML 属性解析的元素。在旧元素上设置的任何事件都不会应用于新元素。

jQuery 通过 live() 事件提供了解决此问题的方法。我找到了一个解决方案这里，它显然实现了与 mootools 相同。

Answer 3

您的方法是正确的，您的 addEvent() 代码中可能存在错误。当您替换innerHTML 时事件处理程序消失的原因非常简单 - 您正在删除处理程序所在的元素，因此处理程序也会被删除。但是您重新添加处理程序的方法应该有效。

我认为这可能是一个范围问题。如果显式引用 div 会发生什么，如下所示：

row.getElement('.b_l').addEvent('change', function(event){
{
  changeValues($('div.selections .b_l'));
});