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>

在头脑中，我设置了一个事件监听器，如：

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

我的问题是，当“b_name”选择更改时，我必须更新“b_level”选项中的选项列表。我通过在另一个页面上通过php脚本获取我的数据库中的可能选项列表并替换“b_level”的innerHTML来实现这一目标。一旦我这样做，附加到“b_l选择器”的事件监听器就不再有效了。

我尝试通过在每次“b_name”更改时将事件侦听器显式附加到“b_l selector”来解决此问题：

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

其中'row'是html元素'div.selections'。

它仍然不起作用，我不知道发生了什么。任何人都可以提出如何解决这个问题的建议吗？或者更好的方式来做我正在做的事情。

由于

Answer 1

这就是JavaScript的工作方式，不是错误。

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

以下是行动中元素委派的基本示例：http://jsfiddle.net/oskar/ENR3E/

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

Answer 2

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

jQuery通过live()事件为此问题提供了解决方案。我找到了一个解决方案here，显然与mootools达到了同样的效果。

Answer 3

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

我认为这可能是一个范围问题。如果你明确引用div会发生什么，如：

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

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

3 个答案: