Treehouse

Adding Events to Adding Events in jQuery

By on  

Earlier this week I posted a usability tip about using CSS and MooTools' custom event functionality to automatically add the "pointer" cursor when an element gets a "click" event attached to it. I received numerous requests for a jQuery version and I think I've figured out how to replicate the functionality.

The jQuery JavaScript FAIL

/* create custom event */
jQuery.event.special.click = {
	 setup: function() {
		  $(this).css('cursor','pointer');
	 },
	 teardown: function(namespaces) {
		  $(this).css('cursor','');
	 }
};
/* usage; nothing different than usual*/
$(document).ready(function() {
	$('#click-me').click(function() {
		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
		$(this).css('background',col);
	});
});

I use the special event object to add a custom event named click. When the event is added, the setup method changes the element's cursor to pointer. If we were to remove that event, the pointer cursor would be removed. The problem with the above code is that it appears to override the default click event and when you actually click on the element, nothing happens. Damn!

The jQuery JavaScript "Success"

/* listen for hover/click */
$(document).ready(function() {
	/* attempt fix */
	$('*').each(function() {
		$(this).mouseover(function() {
				if(jQuery.data(this,'events').click) {
					$(this).css('cursor','pointer');
				}
		});
	});
	/* usage? */
	$('#click-me').click(function() {
		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
		$('#click-me').css('background',col);
	});
});

The only way I could get this to work without modifying the jQuery core is to place a mouseenter event on each element in the DOM that checked to see if a click event was present for the given element. If so, show the cursor pointer. This is an ugly method to achieve the goal but the only one I found. If an element were to be added to the DOM dynamically, the above wouldn't work.

UPDATE: The jQuery JavaScript Solution

jQuery.event.special.click = {
    setup: function() {
        $(this).css('cursor','pointer');
        return false;
    },
    teardown: fuction() {
        $(this).css('cursor','');
        return false;
    }
};

Brandon Aaron and Scott Kyle blessed us with the solution; it looks like I was very close. Adding return false; would have done it.

Thank you to Brandon and Scott for helping me out!

ydkjs-3.png

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

  • WebKit Marquee CSS:  Bringin’ Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like...

Discussion

  1. It’s great. It will be a gain of time ! I don’t see how I could do that in an other way.

  2. Your “FAIL” method will work just fine if you return false from both the setup and teardown functions. Also, just a note to readers, you should use “jQuery” rather than a $ in production code, or $ in a closure (my preferred method).

  3. Hey David,

    I decided to respond via a blog post of my own on this topic. As Scott mentioned the Special Event hooks must return false in order to make this work. Hopefully my blog post clears this up.

  4. Thank you Brandon — I commented on your blog.

  5. A very good idea David! :)

    I can only think of one caveat – if you want to take advantage of event delegation then you wouldn’t want the parent (to which you want the events to bubble) to have that CSS property. Using either jQuery’s live() binding or “manual event delegation” might lead to unexpected results.

  6. madhu

    hi,

    i have one doubt

    when i have two links if iclick first link one alert will display, if i click second link another alert will display how it is possible. Can you pls tell me the code if you know.

    thank You

  7. I have found custom jquery events extremely useful!

  8. […] Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click». […]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!