在表单提交用部分替换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：success有关，我只是不知道将其放在哪里，以便它实际上对我的情况有所帮助。

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

有小费吗？ 但我得到相同的行为。

Answer 1

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

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