ruby-on-rails - 为什么在 Rails 应用程序中通过 ajax 替换表格内容后，提交按钮不起作用？

Question

Rails 新手，Ajax 新手。我有一个显示可搜索记录表的页面。我使用partials 和jQuery 通过ajax 使用搜索结果更新表的内容。这部分效果很好，除了显示搜索结果时，即使选择了项目，单击提交按钮也不会执行任何操作。

表部分定义:

<table border="1" class="pretty">
  <tr>
    <th></th>
    <th><%= sortable "name", "Name" %></th>
    <th><%= sortable "num_posts", "Posts" %></th>
    <th></th>
  </tr>

<%= form_tag() do %>
<% @friends.each do |friend| %>
  <tr>
    <td><%= image_tag friend.pic_url %></td>
    <td><%= friend.name %></td>
    <td><%= friend.num_posts %></td>
    <td><%= check_box_tag "selected_friends[#{friend.id}]" %></td>
  </tr>
<% end %>
</table>
<%= paginate @friends %>
<br />
<%= submit_tag "Un-ignore friend(s)", :name => 'unignore_selected' %>
<% end %>

这是通过 Ajax 渲染部分的 jQuery 调用:

$('#datatable').html('<%= escape_javascript(render("table") ) %>');

这里是 application.js 中我用来支持这个的 jQuery 方法(直接取自 Railscasts，所以我不是 100% 清楚这些方法在幕后的作用)

$('#datatable th a').live('click', function() {
  $.getScript(this.href);
  return false;
});

$('#data_search').submit(function() {
    $.get(this.action, $(this).serialize(), null, 'script');
    return false;
});

当我完成搜索后单击提交按钮时，Firebug 或 Chrome 开发工具中根本没有任何事件，也没有击中操作 Controller 上的断点。我尝试添加一个类似于上面“#data_search”的 jQuery 函数，但这完全破坏了按钮。

对于为什么会发生这种情况以及如何解决它有什么想法吗？

Answer 1

首先将表格 wrapper 移到 table 外面，看起来有点扭曲。

您的部分中的表单没有操作。因此，当按下submit按钮时，它不会执行任何操作，因为它没有被告知要做什么。

改变

form_tag()

到

form_tag('/place_you_want_this_form_posted_to')

这应该首先处理提交表单的问题。

下一个问题是(我假设)您还希望通过 ajax 提交此表单。这就是 $('#data_search').submit(function() { block 对第一个表单所做的事情。它劫持该表单的提交并使其成为 ajax 调用。您需要对你的新表单做同样的事情。首先给它一个 id，然后做同样的事情来劫持它。

form_tag('/place_you_want_this_form_posted_to', :id => "my_form_id")

javascript劫持与之前相同

$('#my_form_id').submit(function() {
  $.get(this.action, $(this).serialize(), null, 'script');
  return false;
});