在没有turbolinks的AJAX之后在轨道中触发js

我有一个rails4应用程序。 因为我不擅长js但我已经关闭了TURBOLINKS。 我已经阅读了很多文章，但我仍然无法弄清楚如何组织我的javascript文件。 目前我遇到了在AJAX追加后触发js代码的问题。

我有一个任务列表（索引页面）。 如果我加载页面然后我可以单击任何任务（更新它们）并且引导模式显示+以下代码正在运行，因此格式化时间并且datetimepicker可用。

如果我使用AJAX创建一个新任务（将由create.js.erb追加），然后点击该模态显示的某个特定任务，但以下代码不会被触发。 （如果我单击其余任务，那么这些任务就像页面加载时一样工作。）

我怎样才能使这个工作？ 我想让代码在页面加载和页面更改时可用。 由于这是用户触发的事件，因此希望不会被触发两次。 可以为我推荐一个清晰的好解释/文章我应该如何组织我的js文件？ 正如我上面提到的，我读了很多，但我更加困惑。

js文件 

var ready = function() { $('.updatetask').on('shown.bs.modal', function (e) { alert('haha'); var modalId = $(this).attr('id'); var deadlineField = $("#" + modalId).find($('.edit-task-deadline')); var deadlineValue = $(deadlineField).attr('value'); var momentDeadline = moment(deadlineValue).format('MM/DD/YYYY hh:mm A'); $(deadlineField).val(momentDeadline); }); $(function () { $('.new-task-deadline').datetimepicker({ sideBySide: true, format: 'MM/DD/YYYY hh:mm A', stepping: 15, widgetPositioning: { vertical: 'bottom' } }); }); }; $(document).ready(ready); $(document).on("page:load", ready);

_task.html.erb部分 

  ........  <i class="fa fa-pencil" data-toggle="modal" data-target="#updatetask_">    <div class="modal fade updatetask" id="updatetask_" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
 
   
 
 
 
      
 
 
  
Executor:  , 
  
Assigner:  , 
  
 
   
 
   
 
 
   current_user.id, "data-rip" => :executor_id %>

create.js.erb 

 $("ul.errors").html("");  //modal error messages get inserted via AJAX $('.alert-danger').show(); $('ul.errors').show();  $("ul.errors").append($("
  • ").html(""));   //hiding modal on creation and setting values to zero for optional new modal $('ul.errors').hide(); $('.alert-danger').hide(); $("#newtask").modal('hide'); $(".task_name_company").val(''); $(".contentarea").val(''); $(".new-task-deadline").val(''); //different div class for different partials + table rows get inserted into view via AJAX $(".newtaskinsert").prepend(''); $(".newtaskinsert2").prepend(''); $("#task_").hide().fadeIn(1000);

    • 额外代码：

    这是我用于新任务的示例代码（因为只有一个没有ID的模态，所以更容易。）

    我想在文档就绪和AJAX添加代码上同时进行更新。 必须在模态ID而不是表单id上调用Submit。

    新任务的工作代码： 

     $('.new-task-submit').on('click', function (e){ e.preventDefault(); var localMoment = moment($('.new-task-deadline').val()); $('.new-task-deadline').val(localMoment.toISOString()); $('#newtask').submit(); });

    我尝试更新任务： 

     edit_task_submit($(document.body)); ..... ...... function edit_task_submit($container) { $container.find('.edit-task-submit').on('click', function (e){ e.preventDefault(); var deadlineField = $(this).find($('.edit-task-deadline')); var localMoment = moment((deadlineField).val()); deadlineField.val(localMoment.toISOString()); alert(deadlineField.val()); $(this).submit(); }); }

    update.js.erb 

      $('ul.errors').hide(); $('.alert-danger').hide(); $('#updatetask_').modal('hide'); $task = $(''); edit_task_submit($task); $('#task_').fadeOut(400, function(){ $(this).remove(); //$(".newtaskinsert").prepend(''); $(".newtaskinsert").prepend('$task'); $(".newtaskinsert2").prepend(''); });

    在此处输入图像描述

    加载页面时， $(document).ready执行一次。 create.js.erb创建新元素，不应用此函数。

    重新组织您的代码如下：

    js文件： 

     function updatetask($container) { $container.find('.updatetask').on('shown.bs.modal', function (e) { var deadlineField = $(this).find('.edit-task-deadline'); var deadlineValue = deadlineField.val(); var momentDeadline = moment(deadlineValue).format('MM/DD/YYYY hh:mm A'); deadlineField.val(momentDeadline); }); } function new_task_deadline($container) { $container.find('.new-task-deadline').datetimepicker({ sideBySide: true, format: 'MM/DD/YYYY hh:mm A', stepping: 15, widgetPositioning: { vertical: 'bottom' } }); } $(function () // shortcut for $(document).ready { updatetask($(document.body)); new_task_deadline($(document.body)); });

    create.js.erb： 

     $("ul.errors").html(""); <% if @task.errors.any? %> //modal error messages get inserted via AJAX $('.alert-danger').show(); $('ul.errors').show(); <% @task.errors.full_messages.each do |message| %> $("ul.errors").append($("
  • ").html("<%= message.html_safe %>")); <% end %> <% else %> //hiding modal on creation and setting values to zero for optional new modal $('ul.errors').hide(); $('.alert-danger').hide(); $("#newtask").modal('hide'); $(".task_name_company").val(''); $(".contentarea").val(''); $(".new-task-deadline").val(''); // time formatting and datetimepicker for new elements $task = $('<%= j render @task %>'); updatetask($task); new_task_deadline($task); //different div class for different partials + table rows get inserted into view via AJAX $(".newtaskinsert").prepend($task); $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>'); $("#task_<%= @task.id %>").hide().fadeIn(1000); <% end %>

    更新： 

     edit_task_submit($(document.body)); function edit_task_submit($container) { $container.find('.edit-task-submit').on('click', function (e) { e.preventDefault(); var $this = $(this); var deadlineField = $this.closest('form').find('.edit-task-deadline'); var localMoment = moment(deadlineField.val()); deadlineField.val(localMoment.toISOString()); $this.click(); }); }

    update.js.erb： 

     <% else %> $('ul.errors').hide(); $('.alert-danger').hide(); $('#updatetask_<%= @task.id %>').modal('hide'); $task = $('<%= j render @task %>'); edit_task_submit($task); $('#task_<%= @task.id %>').fadeOut(400, function() { $(this).remove(); $(".newtaskinsert").prepend($task); $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>'); }); <% end %>
    Interesting Posts

    使用JQuery或Ajax加载.txt文件

    用JavaScript解析.msg文件

    检查JQuery是否存在DIV id

    在多个子弹出窗口之间切换控制

    从JSON响应中删除第一行

    Javascript检测android原生浏览器

    如何使用jquery一键检查复选框（3）

    jQuery插件打破了this.each

    从localstorage中的对象中删除数组

    将表数据保存到HTML5 LocalStorage