Jquery works in console but not Rails 4 application.js file

Question

This is my html markup: (in welcome/index.html.erb) in a Rails 4 project.

<div class="bottom-bottom-box box">
<div class="miv-box">
  <span class="five-yr thin-text">5-year</span></br>
  <span class="avg-return thin-text">Average Return</span>
</div>
  <span class="percent bold-text">19%+</span>
</div>

and this is my jquery: (in welcome.js) ( i don't know coffeescript so i just re-named the premade file to .js instead of .js.coffee )

$(".bottom-bottom-box").on('click', function() {
  alert('test');
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
   el.text(el.data("text-original"));
  } else {
   el.data("text-original", el.text());
   el.text(el.data("text-swap"));
 }
});

My on click function to do the alert('test') won't even work, the weird part is when i type the exact same line in the console it works.

$(".bottom-bottom-box").on('click', function() { alert('test') });

Not sure what could possibly be wrong but if anyone has had this problem before pls let me know! thnx

score 4 · Accepted Answer · edited May 23 '17 at 12:09

Sounds like .on() is being called before the .bottom-bottom-box elements are loaded into the DOM.

This is a common situation where Javascript included in the head runs before the body is loaded. Event handlers can only be attached to elements present in the DOM, which is why your code fails on page load (DOM empty), but works in the console (DOM loaded).

You can fix this by moving your JS includes to the bottom of the page, or tell jQuery to run your code after the DOM is loaded, like this:

$(document).ready(function() {
  $(".bottom-bottom-box").on('click', function() {
    alert('test');
    var el = $(this);
    if (el.text() == el.data("text-swap")) {
      el.text(el.data("text-original"));
    } else {
      el.data("text-original", el.text());
      el.text(el.data("text-swap"));
    }
  });
});

If you use Turbolinks, check out this answer: https://stackoverflow.com/a/18770589/1153362

Jquery works in console but not Rails 4 application.js file

1 Answers1