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.

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

| improve this answer | |
  • I had tried getting it to work using behaviors, but that was a dead-end for me as well. – Stan Jul 6 '14 at 16:02
  • No try understand, just use as it is shown. – Nikit Jul 6 '14 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. – kiamlaluno Jul 8 '14 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));

| improve this answer | |
  • 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 '14 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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