1

我将显示一组存储值的页面放在一起。我正在使用 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);});

My problem is that when the "b_name"select changes I have to update the list of options in the "b_level"select. 我通过另一个页面上的 PHP 脚本从我的数据库中获取可能的选项列表并替换"b_level"'innerHTML. 一旦我这样做了，附加到的事件监听器"b_l selector"就不再起作用了。

我试图通过在"b_l selector"每次"b_name"更改时显式附加一个事件侦听器来解决此问题，如下所示：

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

其中“行”是 html 元素“div.selections”。

它仍然无法正常工作，我不知道发生了什么。任何人都可以就我如何解决这个问题提出建议吗？或者也许是做我正在做的事情的更好方法。

4

3 回答 3

2

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

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

Here's a basic example of Element Delegation in action: http://jsfiddle.net/oskar/ENR3E/

And the documentation: http://mootools.net/docs/more/Element/Element.Delegation

于 2010-04-09T22:23:47.750 回答
1

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

jQuery 为这个事件问题提供了解决方案live()。我在这里找到了一个解决方案，显然与 mootools 实现了相同的效果。

于 2010-04-09T21:43:50.110 回答
0

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

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

row.getElement('.b_l').addEvent('change', function(event){
{
  changeValues($$('div.selections .b_l'));
});
于 2010-04-09T21:44:07.770 回答