事件未在第一页加载时加载但在刷新后有效

Question

我正在使用 Rails7 创建一个名为 Employee Management System 的应用程序。为了添加员工，我创建了一个表单。在这里，我使用了嵌套表单字段 gem 来添加员工的联系人。问题是第一次加载表单时，当我想添加或删除联系人字段时，它会重定向到同一个表单。但是当我刷新页面时，它开始正常工作。甚至添加或删除的字段也会反映在数据库中。仅在首次加载创建或更新员工页面时才会产生此问题。我发现，当我单击 link 添加员工并打开表单时。 html 中未加载事件。正如我们在下图中 body 标签附近看到的：

但是刷新后，事件被加载：

我在 gem 文件夹中看到了 js.coffee 文件，但这对像我这样的初学者来说太高级了。那里的代码如下所示：

window.nested_form_fields or= {}

nested_form_fields.bind_nested_forms_links = () ->
  $('body').off("click", '.add_nested_fields_link')
  $('body').on 'click', '.add_nested_fields_link', (event, additional_data) ->
    $link = $(this)
    object_class = $link.data('object-class')
    association_path = $link.data('association-path')
    added_index = $(".nested_#{association_path}").length
    $.event.trigger("fields_adding.nested_form_fields",{object_class: object_class, added_index: added_index, association_path: association_path, additional_data: additional_data});
    if $link.data('scope')
      $template = $("#{$link.data('scope')} ##{association_path}_template")
    else
      $template = $("##{association_path}_template")
    target = $link.data('insert-into')

    template_html = $template.html()

    # insert association indexes
    index_placeholder = "__#{association_path}_index__"
    template_html = template_html.replace(new RegExp(index_placeholder,"g"), added_index)
    # look for replacements in user defined code and substitute with the index
    template_html = template_html.replace(new RegExp("__nested_field_for_replace_with_index__","g"), added_index)

    # replace child template div tags with script tags to avoid form submission of templates
    $parsed_template = $(template_html)
    $child_templates = $parsed_template.closestChild('.form_template')
    $child_templates.each () ->
      $child = $(this)
      $child.replaceWith($("<script id='#{$child.attr('id')}' type='text/html' />").html($child.html()))

    if target?
      $('#' + target).append($parsed_template)
    else
      $template.before( $parsed_template )
    $parsed_template.trigger("fields_added.nested_form_fields", {object_class: object_class, added_index: added_index, association_path: association_path, event: event, additional_data: additional_data});
    false

  $('body').off("click", '.remove_nested_fields_link')
  $('body').on 'click', '.remove_nested_fields_link', ->
    $link = $(this)
    return false unless $.rails == undefined || $.rails.allowAction($link)
    return false if $link.attr('disabled')
    object_class = $link.data('object-class')
    delete_association_field_name = $link.data('delete-association-field-name')
    removed_index = parseInt(delete_association_field_name.match('(\d+\]\[_destroy])')[0].match('\d+')[0])
    $.event.trigger("fields_removing.nested_form_fields",{object_class: object_class, delete_association_field_name: delete_association_field_name, removed_index: removed_index });
    $nested_fields_container = $link.parents(".nested_fields").first()
    delete_field = $nested_fields_container.find("input[type='hidden'][name='#{delete_association_field_name}']")
    if delete_field.length > 0
      delete_field.val('1')
    else
      $nested_fields_container.before "<input type='hidden' name='#{delete_association_field_name}' value='1' />"
    $nested_fields_container.hide()
    $nested_fields_container.find('input[required]:hidden, select[required]:hidden, textarea[required]:hidden').removeAttr('required')
    $nested_fields_container.trigger("fields_removed.nested_form_fields",{object_class: object_class, delete_association_field_name: delete_association_field_name, removed_index: removed_index});
    false

$(document).on "page:change turbolinks:load", ->
    nested_form_fields.bind_nested_forms_links()

jQuery ->
    nested_form_fields.bind_nested_forms_links()


#
# * jquery.closestchild 0.1.1
# *
# * Author: Andrey Mikhaylov aka lolmaus
# * Email: lolmaus@gmail.com
# *
#

$.fn.closestChild = (selector) ->
  $children = undefined
  $results = undefined
  $children = @children()
  return $() if $children.length is 0
  $results = $children.filter(selector)
  if $results.length > 0
    $results
  else
    $children.closestChild selector

是否可以通过更改来解决此问题？请帮忙！！

Answer 1

在我的应用程序上工作了 2 天后，当我将 jquery 添加到 application.js 以添加一个使永久地址和本地地址相同的复选框时，同样的问题出现了。所以我得出结论，问题不是因为 gem 而是其他原因。所以我用谷歌搜索，发现 turbolink 是罪魁祸首。在 turbo-rails github 存储库中搜索后，在 'closed' 类别中找到了问题。通过在 application.html.erb 中的 head 部分添加一个简单的行，我读到了这个问题。行是：

<meta name="turbo-visit-control" content="reload">

但是，有一个问题。添加此行后，闪存消息因重新加载而消失。所以我再次谷歌搜索以找到更好的方法。删除了这一行，并在 application.js 中更改了

import "@hotwired/turbo-rails"

至

import { Turbo } from "@hotwired/turbo-rails" Turbo.session.drive = false.

这是我在 turbo-rails readme.md 中找到的。无需刷新页面即可重现闪现

事件未在第一页加载时加载但在刷新后有效

Events not loading on first page load but works after refresh

javascript

jquery

ruby-on-rails

turbolinks

turbo-rails