Using Simple jQuery click() events in Drupal 7

Question

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.

Answer 1

(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...

Answer 2

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));