Rails UJS - 第一次操作后无法触发 jquery

Question

在我的 show.html.haml 视图中，我有一个表单，用户可以在其中更改一些设置。我刚刚更新为使用 Rails UJS，当我的用户更改下拉菜单时，他们看到 jquery shizzle 正在做这件事。

我在 show.js 文件中真正做的就是刷新表单所在的部分并闪烁错误消息。

问题是一旦更新一次，jquery 下拉选择就不起作用了。我认为这是因为它正在渲染 update.js 视图——因此我包含了这个文件。但是，仍然没有任何反应，并且我在日志中没有任何错误。

在 show.html.haml 我有（简化）：

#show_form
  = render "show"        

我的节目部分包含：

= semantic_form_for @product_order, :remote => true do |f| 
  = f.select :shipping_method, options_for_select(ProductOrder::Couriers, :selected => @product_order.shipping_method)

我的 show.js.erb 和 update.js.erb 包含：

$("#show_form").html("<%= escape_javascript(render("show")) %>");
$("#status_banner").effect("highlight", {}, 3000);
$("#status_banner").html("<h2>ORDER STATUS: <%= (@product_order.state.titlecase) %></h2>");
$("#status_banner").removeClass("alert").addClass("alert <%= (@product_class) %>");

在我的 product_order.js.coffee 我有这个：

jQuery ->
  $("#dropdown_select").change ->
    $(this).closest("form").submit()
    $(this).serialize()
    null
    "script"
    false

就像我说的，第一个操作有效，但在第一次更新后失败。我的控制器更新操作有点笨重，但我确保包含 format.js。我还尝试将 respond_to :js 放在控制器的顶部。

是我做错了还是有一个我看不到的简单修复方法？

Answer 1

您的问题是刷新表单后，您的 js 没有触发，因为从技术上讲，它是 DOM 中的一个新元素。您需要像这样使用 jquery 事件绑定：

jQuery ->
  $("#dropdown_select").on "change", ->
    $(this).closest("form").submit()
    $(this).serialize()
    null
    "script"
    false