1

I've been able to get jQuery to load and work for some basic things such as:

(function ($) {
  console.log('jquery called');

  $(document).click(function() {
    var h1 = $('h1').text();
    console.log(h1);
  });
}(jQuery));

However, when I try to do the following, nothing happens.

(function ($) {
  $("h1").click(function() {
    alert('clicked!');
  });
}(jQuery)); 

I'm wondering if this has something to do with when the .js file gets called. I suspect that the document element already exists, so having a click event on it is no problem. However, I think that the h1 elements don't exist by the time the click event is loaded. I've tried the .bind() and .on() functions as well, with no luck.

Any ideas?

I call my .js file from my theme's info file, not sure if that matters.

4
  • have you tried it in $(document).ready() function?
    – Geoff
    Jul 6, 2014 at 0:12
  • Yeah, I tried putting the test alert() in the $(document).ready() function, but it still didn't work.
    – Stan
    Jul 6, 2014 at 1:46
  • are there any errors in the console.log?
    – Ollie
    Jul 6, 2014 at 10:19
  • Nope, no errors in the console.log.
    – Stan
    Jul 6, 2014 at 16:01

2 Answers 2

2
(function ($) {
// To understand behaviors, see https://drupal.org/node/756722#behaviors
Drupal.behaviors.ss2 = {
  attach: function(context, settings) {

  $("h1").click(function() {
    alert('clicked!');
  });
}}

})(jQuery); 

be careful with braces at the end, and rename ss2 as you want, it's just for example...

3
  • I had tried getting it to work using behaviors, but that was a dead-end for me as well.
    – Stan
    Jul 6, 2014 at 16:02
  • No try understand, just use as it is shown.
    – Nikit
    Jul 6, 2014 at 21:07
  • This gets my vote. Behaviors are the Drupal way; they are called after the DOM is created, so there isn't any problem with the code trying to access an HTML element before it is created. Plus, they are a must in the serious Drupal programming.
    – apaderno
    Jul 8, 2014 at 13:37
-1

So figured out that having your jQuery called in the footer after all the dom elements load works much better for things like click events. Here is how I got it to work:

  • Open your theme's template.php file
  • In the ThemeName_preprocess_html(&$variables) function add the following:
    drupal_add_js(drupal_get_path('theme', '**ThemeName**') . '/js/**FileName**.js', array( 
      'scope' => 'footer', 
      'weight' => '15' 
    ));
  • Have your FileName.js file look something like this:

(function ($) {
//insert your jquery here $('h1').click(function() { $(this).hide('slow'); console.log('h1 clicked!');
}); }(jQuery));

1
  • 1
    This show that you have something broken on the site, in future it will raise new problem, resolve first your issue...
    – Nikit
    Jul 6, 2014 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.