Comment faire pour lier un jQuery événement onclick avec Coffeescript, dans les Rails?

Je me rends compte que j'ai probablement besoin de déclarer l'événement onclick dans le monde, mais j'essaie d'éviter d'utiliser le --bare balise lors de la compilation.

C'est le code que j'essaie de le faire travailler...

jQuery ->
  $('.tabs_image').click ->
    $(this).addClass('tabs_selected')
    $('.tabs_video').removeClass('tabs_selected')
    $('#image_upload_form').show()
    $('#video_upload_form').hide()
    return

  $('.tabs_video').click ->
    $(this).addClass('tabs_selected')
    $('.tabs_image').removeClass('tabs_selected')
    $('#image_upload_form').hide()
    $('#video_upload_form').show()
    return

  return

Il fonctionne très bien une fois que la page est difficile de mise à jour (actualisation de la souris) dans le navigateur Chrome.

J'ai essayé $ =>, $(document).ready ->, et $(document).ready =>.

"Il fonctionne très bien une fois que la page a été actualisée dans le navigateur Chrome." Si le contenu est dynamique ajouté, you aurez à utiliser délégué événements.
Dans ce cas, le contenu existe déjà; il n'est pas dynamiquement ajoutés. Je vais essayer malgré tout. C'est dans une application Rails, donc je ne sais pas si cela aurait un effet

InformationsquelleAutor Crimbo | 2014-05-12

7

J'ai trouvé le noeud du problème - Mon Coffeescript était très bien, il a été
en raison d'un joyau appelé Turbolinks que le code n'a pas été
le déclenchement. Il garde la page en cours d'instance en vie et ne remplace que
le corps et le titre dans la tête, ce qui signifie que vous ne pouvez pas compter sur
DOMContentLoaded ou jQuery.ready() pour déclencher votre code. C'est
pourquoi le script ne semble pas fonctionner lorsque la page a été dur rafraîchi
(actualisation cliqué).

Pour ceux qui utilisent Turbolinks
- Si vous souhaitez désactiver les liens spécifiques
Ajouter data-no-turbolink au conteneur parent du lien(s) comme si...
```
<a href="/">Home (via Turbolinks)</a>
<div id="some-div" data-no-turbolink>
  <a href="/">Home (without Turbolinks)</a>
</div>
```
- Si vous avez beaucoup de code JavaScript qui lie les éléments sur jQuery.ready()
À l'aide de l'événement crochet page:change, vous pouvez remplacer le jQuery.ready() avec $(document).on 'page:change', -> ou, encore mieux $(document).on 'ready page:change', ->; mieux, car cela signifie que même si turbolinks est pas en cours d'exécution (en raison d'être sur une ancienne version de navigateur peut-être), l'appel de déclenchement en raison de ready être là.

Il est préférable d'utiliser page:change au lieu de page:load. L'ex hook d'événement se déclenche lorsque la page est chargée à partir du serveur ou à partir du cache côté client, alors que le dernier cas, le crochet se déclenche uniquement lorsqu'un nouvel élément de corps a été chargé dans le DOM (source).

...ou...

Vous pouvez utiliser le jquery-turbolinks gem.

Gemfile:
```
gem 'jquery-turbolinks'
```
bundle install , puis l'ajouter à l'option JavaScript de votre fichier de manifeste, dans cet ordre:
```
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
//... your other scripts here ...
//
//= require turbolinks
```
InformationsquelleAutor Crimbo
3

Je dirais que vous devriez être en utilisant les événements de la délégation de toute façon.

Essayer quelque chose comme cela et voir si vous obtenez de meilleurs résultats:
```
$ ->
  $('body').on 'click', '.tabs_image', ->
    # do stuff
```
- "je dirais que vous devriez être en utilisant les événements de la délégation de toute façon." Pourquoi, étant donné que "Dans ce cas, le contenu existe déjà; il n'est pas dynamiquement ajoutés à la fin."
- Merci, j'ai essayé ceci, mais n'aide pas. Je reçois le sentiment que j'ai trouvé un bug dans les Rails
- Maintenant que je sais que c'était en raison de Turbolinks, à l'aide du crochet page:load travaille en remplaçant votre $ -> avec $(document).on 'page:load', -> ou $(document).on 'ready page:load', ->
- car s'il y a plusieurs correspondances sélecteurs, vous mettez le même événement à plusieurs reprises. Il pourrait entraîner des fuites de mémoire. Probablement le bord de cas pour la plupart des applications, mais il n'y a rien de mal avec juste à l'aide de l'événement délégation générale à la lutte contre ces défis potentiels. PPK touche ici dans la phrase juste avant "Le problème de focus": quirksmode.org/blog/archives/2008/04/delegating_the.html
InformationsquelleAutor Nick Johnson
0

charge les dom avec $(document).on 'ready page:load', -> au lieu de jQuery -> vous pouvez en lire plus sur le Les Rails De La Documentation
- Il est préférable d'utiliser page:change que page:load (source)
InformationsquelleAutor Alex Onozor

Vous devez vous connecter pour publier un commentaire.

Pour ceux qui utilisent Turbolinks