Question

I guess this is really simple, but I can’t get it to work. I have a script in my help.js in app/assets/javascript.

This is loaded and if I add an alert() it is run, but when I try to call the javascript (jquery click()) nothing happens. If I have the javascript-code in the page it works if at the bottom of the page.

I guess the includes from the assets are put at the start of the page, and then my script won’t work. So…

1. Am I completely worthless at writing javascripts?
2. Should the javascript be placed at the end, and how would that be done when requiring it from assets without moving the complete javascript_include_tag? (I guess I could exclude it from applications and load it separately, but it feels wrong).
3. It feels very strange that this shouldn’t work, so where did I go wrong?

help.js

$('.clickme').click(function() {
  $('#working').show();
  var htmlStr = this.getAttribute('data-message');
  $('#helper_box').html(htmlStr);
  $('#helper_box').toggle('slow', function() {
    // Animation complete.
    $('#working').hide();
  });
});

index.html.erb

<div class="clickme" data-message="Something...">
  <%= image_tag("question_mark.png", :alt => "helper") %><br>
</div>

Answer 1

Events in jQuery should be added after the document is completely loaded. Have you tried using

$(document).ready(function() {
  $('.clickme').click(function() {
    $('#working').show();
    var htmlStr = this.getAttribute('data-message');
    $('#helper_box').html(htmlStr);
    $('#helper_box').toggle('slow', function() {
     // Animation complete.
     $('#working').hide();
    });
  });
});