javascript - 复选框更改事件仅在重新加载页面后触发
问题描述
我正在使用 Ruby on Rails 编写一个应用程序,我有一个表单,如果选中了一个复选框,它会显示某个<div>
,如果不是,我会style="display:none:"
通过 rails 添加。通过 Coffeescript 和 JQuery,我也可以在更改时进行相同<div>
的切换。
咖啡脚本:
jQuery ->
$(document).ready ->
$("#hasUser").change ->
$("#userPart").toggle();
return
return
return
HTML:
<div class="form-group">
<%= contato_form.label :hasUser, :class => 'inline-checkbox' do %>
Possui usuário <%= contato_form.check_box :hasUser, :id => 'hasUser' %>
<% end %>
</div>
</div><!-- Closing from uncopied code -->
<div id="userPart" class="findMe" <% if @contato.usuario.id.blank? %> style="display:none;" <% end %>>
<h2> Usuário: </h2>
<div class="container">
<%= contato_form.fields_for :usuario do |usuario_form| %>
<%= render partial: 'usuarios/campos_usuario', locals: {form: usuario_form} %>
<% end %>
</div>
</div>
这里的问题是,当我使用 to 表单时它运行良好Create
,但在Edit
Coffeescript 上仅在重新加载后运行。
解决方案
这是一个涡轮链接问题。在尝试运行其余代码之前,我必须检查是否正确加载了 turbo-links。
jQuery ->
$(document).ready ->
$(document).on 'turbolinks:load', #Added line
$("#hasUser").change ->
$("#userPart").toggle();
return
return
return
return
推荐阅读
- amazon-web-services - ECS 任务定义是否与 K8S 中的 POD 规范大致相同
- vue.js - 在命名空间模块中调用使用方括号(计算机属性名称)定义的 Vuex 操作
- r - 使用 ggplotly 删除跟踪信息并控制鼠标悬停在瀑布图的信息上
- android-studio - 如何删除分号后的字符,因为我不能使用 split()
- javascript - TypeError:change.after.val 不是一个函数 firebase
- oop - 此代码中是否正确解释了可导航性?
- spring-boot - Kotlin 原语的 Spring 验证
- ruby-on-rails - 已解决 - Ruby On Rails 中 FactoryBot 构建方法中的 ArgumentError
- html - 聊天框 UI 不使用 react-bootstrap Accordion 滚动
- python - 在 django 中发送响应后更改上下文