如何将IE7 +中的onchange附加到父元素

时间:2011-03-17 20:18:38

标签: javascript internet-explorer-7 prototypejs

我有一个动态表单,其中使用JavaScript添加和删除行。从Safari,Chrome和Firefox,这种形式运作得很漂亮。在IE中,嗯,我们只是说它没有......

<div id="container">
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>

  <a id="add-another" href="#">Add a row</a>
</div>

<script src="prototype.js"></script>
<script>
  $("container").observe("change", function(ev) {
    alert("changed " + ev.element() + " to " + $F(ev.element()));
  });

  $$("#container input, #container select").each(function(el) {
    el.observe("change", function(ev) {
      alert("changed[2] " + ev.element() + " to " + $F(ev.element()));
    });
  });

  $("add-another").observe("click", function(ev) {
    var cloned = $("container").down(".rule").clone(true);
    $("container").insert({top:cloned});
    ev.stop();
  });
</script>

我看到的唯一onchange消息是changed[2]。我更愿意看change,因为这意味着我只有一个听众,而不是数百个。

是否有任何已知的解决方法,以便我可以在父节点上安装单个观察者,并接收onchange事件?

我已经阅读了MSDN article on onchange,我确实发现了一条评论,即无法附加onchange,但也许存在解决方案?

1 个答案:

答案 0 :(得分:0)

我在Safari,FF和Chrome中有点惊讶。这是我永远不会想到尝试使用包装类的东西,因为它不是表单元素。聪明。

除非它干扰别的东西,直到IE为了改善人类而摆脱世界,我认为一个可行的替代方案可能是利用PeriodicalExecutorAbstract.TimedObserver的扩展来检查每隔一段时间使用一次包装类,可能会结合使用来检查浏览器是否为IE。