我渲染一个页面,其中部分名为_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 ->

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

===============>>#1 票数:1 已采纳

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

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

  ask by Ecnalyr translate from so

未解决问题?本站智能推荐:

1回复

Rails 4:部分渲染后无法使用javascript(使用ajax)

我正在使用CoffeeScript执行Ajax请求,然后从我的控制器渲染部分,但之后部分已经渲染,它不能使用我以前的Javascript。 例: 最后我的home_controller动作我有: 在我的home.js.coffee : 然后在我的部分_frame.ht
1回复

Rails AJAX表单提交成功,但是页面上没有任何反应

我正在尝试在Rails待办事项列表应用程序中修改表单以使用AJAX而不是HTML。 我已经将表单提交到后端,但是在前端,该页面不执行任何操作。 提交后,我想通过AJAX显示列表。 这是我的表格– app/views/lists/_form.html.erb : 这是用于呈现表单
1回复

Rails Ajax远程Javascript

我有三个选择框,可动态更改其选项。 目的是寻找执行一项以上Job Employees 。 我的问题是我的CoffeeScript文件仅触发一次。 当选择第一个选项后更新并渲染局部文件时,我无法在第三个选项上触发它。 在触发javascript文件assets/javascripts/
1回复

Rails4:通过Ajax进行表单更新不起作用->模板错误

当用户输入有效日期时,我正在尝试更新表单中的部分。 CoffeeScript正在启动对控制器的调用,并且控制器启动“ .js.erb”操作以呈现部分表单。 我想要的是将用户输入的日期提供给“自动完成”字段,因此将仅返回并提供具有特定有效日期的值... 参见下面的代码: fligh
2回复

coffeescript。关于“更改”重复的ajax调用

我已经使用.on“更改”事件来更新名为“ form_name”的文本字段中的记录 此“ form_name”文本字段的行为类似于搜索框以及下拉菜单,请参见下图 文字栏位图片 当我键入一个form_name时,它将搜索一个表单名称,然后我选择表单记录的名称被保存两次。 co
2回复

发送Ajax请求的`ajax:send`事件和`click`事件的区别

我在这样的导轨中使用ajax请求和coffee 。 这段代码可以正常工作,但是当我将click事件更改为ajax:send事件(我认为它可以更正确地表示我在做什么)时,代码的工作原理几乎没有什么不同。 单击后即会出现该panel ,但是加载图像仅在2或3秒后出现。 我这次将像以前
1回复

AJAX atw谁收听所有textarea id的

我觉得这很容易,我应该踢自己。 我有这个咖啡脚本: 而且,我不想只听#invitation_username_1543而是将其1543替换为页面上的任何ID号。 我也有这个局部模态渲染。 有问题的咖啡脚本正在收听的行是textarea id =“ invitation_userna
1回复

使用Ajax或jQuery使Rails应用程序中的表元素与页面分开

我有一个包含用户站点列表的页面,在该页面上我正在进行API调用,以检查每个站点的状态。 问题在于,它会使页面永久加载,因此我希望页面加载完毕,然后在使用AJAX或jQuery完成检查后更新该表元素。 虽然我对AJAX或jQuery不太满意,但我一直在阅读的所有Rails / Ajax教程似乎
1回复

在ajax中传递字符串

我具有用于动态选择框的coffeescript函数,并且需要将“ modelsSelect”内容传递给该其他脚本,但是我无法使其正常工作。 diys.coffee update_make_models.coffee make_models / _make_models.ht
1回复

Ajax on Change不会覆盖.done上的数据

我一直在构建一个小的“插件”,以重用Rails应用程序中的一些代码来构建和拆除选择元素,具体取决于父选择元素的值和Ajax响应。 在我开始将这段代码分成可重用的代码之前,所有的Web服务和功能都可以正常工作。 这是coffescript中的当前代码: 这是通过以下方式在选择器上调用的