jquery is not adding a class

Question

On my Drupal site, I have a simple jquery file attached to the theme. This file is added in preprocess_node. The whole content of the file is as follows:

(function ($) {
  console.log("hello world");
  $('li').addClass('hello');
  $('div').addClass('hi');
})(jQuery);

Here is what happens when I run any Drupal page:

1. no javascript errors
2. the console shows "hello world "
3. in Chrome debug, div's do not have class "hi" and li's do not have class "hello"

I ran the same (without wrapper function) on jsfiddle for some basic html and the result was as expected, classes were added to div's and li's and can be seen in Chrome debug. So why is it not working in Drupal?

Answer 1

You need to utilize Drupal's JavaScript Behaviors functionality in order to ensure that your javascript is run after the DOM has loaded and that it will not conflict with other javascript in Drupal.

Try changing your JS file's code to this:

(function ($) {

Drupal.behaviors.myModuleBehavior = {
  attach: function (context, settings) {
    console.log("hello world");
    $('li').addClass('hello');
    $('div').addClass('hi');
  }
};

}(jQuery));