在表单提交将DOM的一部分替换为分部之后，我应该将ajax成功绑定到什么来使我的javascript工作

Question

我呈现了一个包含名为_drills_dots的分部的页面。drills.js.coffee文件包含一个函数，该函数在我加载表单（通过分部）、提交表单（remote=>true）并再次加载分部_drills_dots之前一直有效。然后，drills.js.coffee中的js函数不再影响_drills_dots绘制的新加载的div（点击点并不能完成它应该做的事情）。

_drills_dots.html.erb:

<div class='row drills dots' id='row_drill_dots'>
  <% @drills.each do |drill| %>
      <div class='small-9 columns unselected drill-object' id="<%= drill.id %>">
        <%= drill.name %>
      </div>
      <div class='small-3 columns'>
        <span class="unselected" id="dot-for-<%= drill.name %>"></span>
      </div>
      <hr>
  <% end %>
</div>

_form.html.erb

<div class='small-12 columns', id='appended_drill_form'>
  <%= simple_form_for @drill, :remote => true do |f| %>
    <%= f.error_notification %>
    <div class="inputs">
      <%= f.input :name, placeholder: 'ADD DRILL', label: false %>
      <%= f.hidden_field :user_id %>
    </div>
    <div class="actions">
      <div class='small-6 columns'>
        <%= f.button :submit, remote: true %>
      </div>
      <div class='small-6 columns text-right'>
        <%= link_to "Cancel", remove_drill_form_drills_path(params), remote: true, class: 'button' %>
      </div>
    </div>
  <% end %>
</div>
<hr>

drills.js.coffee

$(document).ready ->
  $(".drills > div > span").click ->
    $(this).toggleClass('unselected selected')
    $(this).parent().prev().toggleClass('unselected selected')
    . . . 

但是如果我从drills.js.coffee文件中删除javascript并将其内联到分部中，一切都会正常工作。

js内联的部分（注意，这里现在是javascript，而不是coffeescript）：

<div class='row drills dots' id='row_drill_dots'>
  <% @drills.each do |drill| %>
      <div class='small-9 columns unselected drill-object' id="<%= drill.id %>">
        <%= drill.name %>
      </div>
      <div class='small-3 columns'>
        <span class="unselected" id="dot-for-<%= drill.name %>"></span>
      </div>
      <hr>
  <% end %>
</div>
<script>
$(document).ready(function() {
  return $(".drills > div > span").click(function() {
    var arrayOfIds, final, id, listOfIds, match, oldLink;
    $(this).toggleClass('unselected selected');
    $(this).parent().prev().toggleClass('unselected selected');
    id = $(this).parent().prev().attr('id');
    arrayOfIds = $.map($(".drill-object.selected"), function(n, i) {
      return "&amp;drill_ids%5B%5D=" + n.id;
    });
    listOfIds = "";
    arrayOfIds.forEach(function(id) {
      return listOfIds = listOfIds + id;
    });
    oldLink = $("#done-button").attr("href");
    console.log(oldLink);
    match = oldLink.match(/(?:group_id%5D=2)(.*)(?=&group=)/)[1];
    final = oldLink.replace(match, listOfIds);
    return $("#done-button").attr('href', final);
  });
});
</script>

我知道有一些方法可以"让事情正常工作"，而无需将javascript移动到部分中，并在更新页面时重新加载它。我知道这与绑定ajax有关：成功，我只是不知道该把它放在哪里，这样它才能真正为我的情况做点什么。

我试着把它放在我的咖啡脚本中：$(".drills > div > span").bind("ajax:success").click ->

有什么建议吗？但我也有同样的行为。

Answer 1

正在异步加载分部的内容。如果您将JavaScript包含在分部中，则每次都会加载它，并将使用新加载的钻点。现有的JavaScript将只绑定到现有的点，而不是异步加载的点。

$(document).ready ->
    $(document).on "click", ".drills > div > span", ->