Ruby on rails 使用Ajax重新加载partial with observe_字段会触发多个事件

我有一个包含3个下拉列表的表单-a、B和C。当a发生变化时，B应该用新的选项列表更新，C应该被清除。当B更改时，C应更新为新的选项列表

我有A、B和C的partials，A和B都包括

observe\u字段

调用来监视自己

每次A更改时，B都会重新加载，并添加一个新的观察者。这意味着每次B更改时，都会触发N+1个重新加载C的请求（其中N是A更改的次数）

我曾尝试将

observe_字段

从替换B下拉列表的部分中移出（将其放在A的部分中），但在第一次更改为A后，B不再触发事件

我还尝试添加了一个

$（'b'）。stopObserving（）调用
：在B上观察者的
之前，但这具有相同的效果-在第一次更改为A后，事件停止在B上触发

有没有办法让这一切顺利进行

编辑：

下面是由
observe\u字段
调用生成的Javascript：

new Form.Element.EventObserver('a', function(element, value) {
  $('b_loading_indicator').show();
  new Ajax.Updater('b',
    'http://localhost:3000/foos/b_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('b_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
    });
});

new Form.Element.EventObserver('b', function(element, value) {
  $('c_loading_indicator').show();
  new Ajax.Updater('c', 
    'http://localhost:3000/foos/c_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('c_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent($('a').value) + '&b_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
  });
});

为什么要使用“观察”字段？您可以只使用纯JS/JQuery并使用onchange事件，这不是observe\u字段的全部要点吗？为了避免直接使用Javascript，我认为没有必要使用帮助程序。因为它是ajaxified的，所以您只需要根据更改更新列表。Observe也应该这样做，我只是认为使用JQuery和js.erb重新呈现列表更简单。为什么有N+1个请求？它应该只有一个，并且只需重新创建元素，这样它就不会触发onchange。helper只生成Javascript，所以我看不出使用helper和手工编写Javascript之间有什么区别。这正是我的问题。当只有1个请求时，为什么会有N+1个请求？如何修复它？：）我相信它正在发生，因为它创造了一系列事件。我相信当你根据A的变化等更新B时会触发该事件。这就是为什么我认为助手会使事件管理变得更加复杂。如果您真的想看到它的运行，请使用调试语句更新helper方法。
 $(document).ready(function() {
   $("#section").bind("keyup", function() {
   data = {this.name: this.val()}; // the value of input that need to send to server
   $.get(url, data, // make ajax request
     function(html) { // function to handle the response
      $("#article_list").html(html); // change the inner html of update div
     });
   });
 });