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

In my show.html.haml view, I have a form where the user's able to change a few settings. I've just updated to use Rails UJS and, when my users change a drop-down menu, they see the jquery shizzle doing it's thing.

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

All I've really done in the show.js file is refresh the partial the form sits in and flash an error message.

我在show.js文件中所做的一切都是刷新表单所在的部分并闪烁错误信息。

The problem is that once it's been updated once, the jquery drop-down select doesn't work. I figured this was because it's rendering the update.js view - I therefore included this file. However, still nothing happens and I get no errors in the logs.

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

In show.html.haml I have (simplified):

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

#show_form
  = render "show"        

My show partial contains:

我的节目部分包含：

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

My show.js.erb and update.js.erb contain:

我的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) %>");

In my product_order.js.coffee I have this:

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

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

Like I said, the first action works but fails after the first update. My controller update action is a little bulky but I have made sure I have format.js included. I've also tried putting respond_to :js at the top of my controller.

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

Am I doing this wrong or is there a simple fix that I'm unable to see?

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

1 个解决方案

#1

Your problem is that after you refresh the form, your js isn't firing because technically its a new element in the DOM. You'd need to use jquery event binding like so:

你的问题是刷新表单后，你的js没有触发，因为从技术上来说它是DOM中的一个新元素。您需要使用jquery事件绑定，如下所示：

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