【问题标题】:Coffeescript JQuery on click only working when page is refreshedCoffeescript JQuery on click 仅在页面刷新时有效
【发布时间】:2013-12-13 16:31:51
【问题描述】:

我有一个使用 coffeescript 的 rails 应用程序。当我刷新页面或直接使用 URL 访问它时,以下代码有效。当我单击指向此页面的链接并尝试它时,它根本不起作用。为什么会这样?

jQuery ->
  console.log "Ready."
  $('form').on 'click', '.add_fields', (event) ->
    console.log "Click."
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

重新加载后,我准备好并在适当的时候单击,并且它可以工作。从另一个页面点击后,我什么也没得到。我也收到了来自 chrome 的弃用警告,我不知道如何解决,因为它来自 JQuery 本身:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
jquery.js?body=1:5375

只有在上面的代码不起作用时才会出现错误。铬会阻止它吗?我正在使用jquery-rails (3.0.4)

【问题讨论】:

  • 您在使用 Turbolinks 吗?如果是这样,当 DOM 被刷新时,表单上的处理程序就会被吹走。您需要将其包装在 page:restore page:load 类型处理程序中。
  • 是的,我是。起初我没有意识到我是。谢谢你!

标签: jquery coffeescript ruby-on-rails-4


【解决方案1】:

这里还有另一个更简单的解决方案。

当您使用自 Rails 4 以来默认的 turbolinks 时,还包括 [jquery.turbolinks gem][1]

说明很简单。

  1. 在您的 Gemfile 中添加:gem 'jquery-turbolinks'
  2. 在您的 JavaScript 清单中(默认:app/assets/javascripts/application.js.coffee):
    需要 jquery.turbolinks 紧接在 jquery 之后。
    在您的脚本之后需要turbolinks

例子:

#= require jquery
#= require jquery.turbolinks
#= require jquery_ujs

# ... your other scripts here ...

#= require turbolinks


有了上述内容,您的代码和行都不需要任何更改:

$(document).ready(ready)
$(document).on('page:load', ready)

【讨论】:

【解决方案2】:

所以事实证明是涡轮链接导致了问题。感谢大卫伯伯指出这一点。这是我为修复它所做的(来自Rails 4: how to use $(document).ready() with turbo-links

ready = ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()


$(document).ready(ready)
$(document).on('page:load', ready)

【讨论】:

  • 还必须添加 $(document).on('turbolinks:load', ready);让它工作
猜你喜欢
  • 2017-01-20
  • 1970-01-01
  • 2016-05-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-15
  • 1970-01-01
相关资源
最近更新 更多