2

我正在尝试关注这篇文章如何使用 Javascript 和 Prototype 不显眼地禁用提交按钮？但我无法让它工作。表单触发了一个 RJS 函数，所以我需要保持助手的 onclick 事件完整。RJS 返回/重新加载相同的表单以及两个新文本。我真的很困惑。这是我的表单的rails代码：

.span-20#comparison
  / new comparison . . .
  / voting forms (also reloaded)
  .span-4.prepend-3.append-6
    - form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
      = hidden_field_tag :poem1_id, poems[:a].id
      = hidden_field_tag :poem2_id, poems[:b].id
      = hidden_field_tag :response, 1
      = submit_tag "Vote for me", :disabled => false, :disable_with => 'Vote for me', :class => "compare"    

  .span-4.append-3.last
    - form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
      = hidden_field_tag :poem1_id, poems[:a].id
      = hidden_field_tag :poem2_id, poems[:b].id
      = hidden_field_tag :response, 2
      = submit_tag "Vote for me", :disable_with => 'Vote for me', :class => "compare"

  .span-4.prepend-8.append-8.prepend-top.last
    - form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
      = hidden_field_tag :poem1_id, poems[:a].id
      = hidden_field_tag :poem2_id, poems[:b].id
      = hidden_field_tag :response, 'draw'
      = submit_tag "Declare Draw", :disable_with => 'Declare Draw', :class => "compare"

RJS

page.replace_html :comparison, :partial => 'poems', :object => @poems
page.insert_html :top, :previous, :partial => 'comparison', :object => @comparison
page << "Effect.ScrollTo($('top'));"
4

1 回答 1

0

这是使用 Prototype 的一种方法：

<script type="text/javascript">
  document.observe("dom:loaded" function() {
    $$("input .compare").each(function(submit) {
      submit.observe("click", function() {
        submit = true;
      });
    });
  });
</script>

input这会在加载 DOM 时为每个具有compareCSS 类的元素（即您的提交按钮）添加一个 onclick 事件处理程序。onclick 事件处理程序会在单击每个按钮时禁用它。请注意，以这种方式使用 Prototype 添加事件处理程序不会替换元素上的任何现有事件处理程序。

于 2010-03-20T16:34:57.010 回答