unitstep.net » jQuery

Triggering links from JavaScript using jQuery

Peter Chng — Tue, 13 Apr 2010 00:56:48 +0000

Sometimes, you may want to trigger a link (that is, an anchor element) directly from JavaScript. That is, you may want to simulate the user clicking on the link programmatically.

If you’re using jQuery, you’ll no doubt be aware of the click() method which can be used to trigger that event on an object. One would think that executing click() on an anchor element would cause the browser to navigate to the URL, but this isn’t the case. You cannot use jQuery’s click() method to fully trigger or simulate a user clicking on a link.

Instead, click(), when executed on links, only seems to trigger any event handlers attached to the DOM element rather than any default behaviour. I’m not sure if this is the case with other event methods or other DOM elements.

The solution

Instead, the solution is to directly manipulate the window.location object from JavaScript. One would think that since preventing the default action is quite simple (with jQuery’s event.preventDefault()), triggering the default action of a link click would also be. But this isn’t the case. Here’s a simple example on how to simulate a user clicking on a link.

In this contrived example, we have an ordered list of links that we’ve prevented the default action from executing on each. Instead, to activate a link we’ve provided an input box for the user to input the link number and then hit ‘Go’. When this happens, we grab the identified link and assign the href attribute value of the link to window.location, effectively recreating the default action of clicking the link.

HTML Source:

XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


  

  jQuery Demos
  
  
  



jQuery Demos


  Google
  The Globe and Mail
  Stack Overflow



Link Number to activate:

JavaScript in scripts.js:

jQuery(function(e)
{
  jQuery("#outboundLinks").click(function(e)
  {
    e.preventDefault();
  });

  jQuery("#activateLink").click(function(e)
  {
    var links = jQuery("#outboundLinks li a");
    var value = parseInt(jQuery("#linkNumber").val());

    if (!isValidNumber(value, links))
    {
      window.alert("Invalid link number.");
      return;
    }
    else
    {
      // This won't work.  We cannot trigger the default
      // behaviour of clicking on a link this way.
      // links.eq(value - 1).click();

      // Instead, manipulate window.location directly.
      window.location = links.eq(value - 1).attr("href");
    }
  });
});

function isValidNumber(value, links)
{
    if (isNaN(value))
    {
      return false;
    }
    else if (value <= 0 || value > links.size())
    {
      return false;
    }
    else {
      return true;
    }
}

Note that window.location is not a regular property; it’s a special object that when assigned to, changes the URL in the address bar of the browser. There’s some debate over whether to directly use the location object or to use the window.location.href property.

This accomplishes the task of triggering the default action of clicking on a link, albeit in a roundabout fashion. Note that this example will only work for regular links that use href attributes as the source of the new URL. If you have links doing more complicated things via the use of event handlers (i.e. Ajax), then you’re better off using click() or directly invoking the JavaScript methods involved.

Copyright © 2012 unitstep.net. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact webmaster@unitstep.net for more information.
Plugin by Taragana

JavaScript Event Delegation

Peter Chng — Fri, 20 Feb 2009 03:47:44 +0000

JavaScript Event Delegation is a technique you may have heard of. It’s a different way of using event handlers that offers clear benefits and is becoming more popular amongst web developers. I’ll give a brief overview of event delegation in JavaScript, along with why you should consider it. Note that this tutorial will use the great jQuery library (v. 1.3.1) for most examples.

Delegation

Delegation is a fairly well-known design pattern. In short, it is a way for a method to produce its result simply by calling a method on another object, thus delegating responsibility to that object to provide the functionality needed by the method. For example, a Cashier object could store a delegate object called Calculator. Calling Cashier.addToTotal(value) would simply delegate to the contained object, calling Calculator.addToTotal(value).

How is delegation different than inheritance? With inheritance, the subclass inherits all of the functionality/behaviour of the parent class. You may not want or need this; in the preceding example, it would not make sense to have Cashier extend from Calculator simply because we wanted the addToTotal() behaviour/functionality. Delegation allows the behaviour advertised by a certain object/class to be provided by another.

Traditional Event Handling

In order to understand event delegation in JavaScript, we should first look briefly at how events are handled traditionally. When I talk of traditional event handling, I am referring to the model that most will know. In this model, functions are individually bound to events of certain elements. For example, to make all links turn bold upon clicking them (and prevent them from being followed), we could use some JavaScript like this:

window.onload = function()
{
  links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; ++i)
  {
    links[i].onclick = makeBold;
  }

}

function makeBold()
{
  this.style.fontWeight = 'bold';
  return false;
}

The key point with this example is that the function makeBold(), our event handler, is bound to each and every a element. From a resource point of view, this is may be a bad thing because the more event handlers that are attached, the more memory that is used, in general.

Of course, I promised I’d be using jQuery, and doing so cleans up the above code substantially, as well as making it cross-browser compatible: (Besides adding a ton of other abilities and making life easier)

jQuery(function()
{
  jQuery('a').click(makeBold);
});

function makeBold(e)
{
  e.preventDefault();
  jQuery(this).css('font-weight', 'bold');
}

While this code is cleaner, it still does basically the same thing as above, that is, the event handler function makeBold() is bound to each matched element, that is, each a element.

As a final note, don’t confuse my use of the term traditional with Peter-Paul Koch’s excellent guide to JavaScript event registration, where he uses the term traditional to refer to one method of event registration, distinct from inline registration and the later W3C and Microsoft “Advanced” event registration models.

Event handling using delegation

By contrast, event delegation uses a single (or comparatively few) event handlers to implement the behaviour required. This takes advantage of two key features of JavaScript events, namely event bubbling and the target event.

Event bubbling is a model for how events take place on the page. It grew out of a need to resolve the order in which events were triggered on ancestor and descendant elements. For example, assume that I have two event handlers, one attached to the “click” event of a div and another attached to the “click” event of an a element within that div. If I click the a element, which event fires first? Event bubbling is one way to solve that question: It states that the event on the inner element happens first, and then the event “bubbles” upwards to trigger events on ancestor or container elements. There is another opposing model that works in the opposite way, but bubbling seems to be better supported and is more relevant for this article.

Here’s a crude diagram of event bubbling, using a pseudo-CSS box model of sorts:

Event bubbling diagram

The event target is the DOM element that issued the event, or the originating element. This is why I believe it’s a confusing term, since it would make more sense to called it the event source. But I digress. The event object, passed to an event handler as an argument (or available via window.event, though jQuery normalizes this) contains a property, event.target, that allows you to get the reference to the “target” element that the event started bubbling up from.

How it’s implemented

All of this is typically accomplished by registering a single event handler to a “container” element that holds all of the elements we wish to react to events for. When an event is triggered on one of the inner elements, it “bubbles up” to the container element, where it triggers the event handler function. From there, we can inspect the source of the event (confusingly called the event target) and then react accordingly.

This is where the delegation aspect comes into play. Since the container element may hold many inner elements, it is unlikely that we would want the same behaviour for each element when an event was triggered on it. For example, we might want certain a elements to trigger one action when clicked, while wanting another set of a elements to trigger another action. We’d typically differentiate these links by using separate class names or by context and then attaching event handlers as appropriate.

Using event delegation, process is similar, but instead of attaching multiple event handlers we have one on the overall parent element. When this event handler is triggered, we determine which element triggered the event and then based on this, delegate the remainder of the processing to another function. An example would be helpful now, as our previous examples with making some text bold weren’t too useful. Here’s the XHTML fragment for the container and elements.



  
    Item A - Click to toggle
    
      Sub-item 1
      Sub-item 2
    
  
  
    Item B - Click to toggle
    
      Sub-item 1
      Sub-item 2
    
  
  Item C - Click to remove
  Item D - Click to remove

And here’s the JavaScript:

jQuery(function()
{
  jQuery('div.container').click(handleEvent);
});

function handleEvent(e)
{
  // Obtain the source element through event.target.
  var target = jQuery(e.target);

  // Now decide what to do with it.
  if (target.is('a.expandList'))
  {
    // We use Function.call() to set the context for the `this` keyword.
    return expandList.call(target, e);
  }
  else if (target.is('a.remove'))
  {
    return remove.call(target, e);
  }
  else
  {
    // Otherwise, allow the default action to take place.
    return true;
  }
}

function expandList(e)
{
  e.preventDefault();

  // The `this` keyword now references the jQuery object representing the
  // target, since that is what we set the context to.
  jQuery(this).parent('li').find('ul.hide').slideToggle('fast');
}

function remove(e)
{
  e.preventDefault();
  jQuery(this).parent('li').fadeOut('normal', function(){jQuery(this).remove()});
}

With this example, the steps are clearly outlined. First, we attach the overall event handler to the container element; events that take place on its inner or children element will bubble up to it. When an event is received, we inspect event.target to determine the origin and based on that, “hand off” to another function to carry out the proper behaviour.

With some standardization of the CSS class names you use and the associated event handler function names, you can clean up this code to reduce duplication and turn it into a design pattern of sorts. In fact, that’s exactly what Dan Webb has done.

More advantages of event delegation

Besides potentially using less resources by having less event handlers bound, event delegation brings one other significant advantage: The ability to have event handlers “auto bind” to new DOM elements. For example, let’s say we were to dynamically update the DOM and add more list items to our previous example; this sort of action happens frequently during Ajax operations where you want to present new content to the user.

In the “traditional” event handling model, the new elements would not automatically respond to events as you would like. This is because the events were individually bound to each element. This is a well known problem. However, in event delegation, since there’s only one event handler bound to the container or ancestor element, the newly-created elements will respond to the event properly! This is because an event on them “bubbles” up to the container element just as for the original elements.

Demo of Event Delegation

Perhaps a little demo is needed. With this demo, you can see both the implementation of event delegation as well as the effect of adding new elements.

Drawbacks of event delegation

I’ve already talked about some of the benefits (fewer bound event handlers, so less resources used and the ability to adapt with DOM changes), but it’s worthwhile to iterate over some of the drawbacks.

Firstly, not all elements “bubble up” in the way described. The blur, focus, change and submit are notable exceptions so you will not be able to use event delegation with these events in the manner described in this article.
Furthermore, the code developed to maintain event delegation can be more complicated to understand than with just using the traditional model. Indeed, there is an initial investment time everyone must make to get going. This should obviously be considered since code maintenance is always important.
Because there’s one event handler being called for all events on inner/descendant elements, there can be some performance implications. If you’re calling expensive functions within this event handler, the event processing could slow down significantly. Careful optimization may be required.

However, some of these drawbacks can be mitigated by using solutions developed by the jQuery community. Even though event delegation is somewhat new, there are already plugins available that take a lot of the grunt-work out of event delegation, abstracting away the details and making things easier for you. Even jQuery itself also supports event delegation through a built-in function as of v1.3. Here are some options for pre-built solutions:

Dan Webb’s Delegate Plugin
This is a fairly straightforward way to implement delegation and it’s easy to setup and understand.
jQuery’s built in live() function
This supports a subset of events but is good enough for most uses.
The Live Query plugin
This is your best bet if you need the most functionality, though I haven’t personally tried it out yet.

Conclusion

Delegation nicely solves the problem of having to rebind events after adding new elements to the DOM. For that reason alone, I’ve started to use in my work more often. At its heart, it’s a useful design pattern, but should be only with full understanding of the pros and cons. I hope you enjoyed reading this article!

References

Revisions

2009-02-20: Added a crude diagram of event bubbling

Upgrade jQuery for better Opera support (Or just upgrade Opera)

Peter Chng — Thu, 26 Jun 2008 00:45:43 +0000

I ran into a weird problem while testing one of my sites that used jQuery with Opera 9.26. (I happened to be using this older version of Opera because I am lazy to upgrade; I’m still using Firefox 2 despite the successful launch of FF3)

The issue was with an Ajax request I was sending. The return value was an array in JSON form. More specifically, the server was returning something like:

{tag:[{id1:'A',id2:'B'}, {id1:'A',id2:'B'}, {id1:'A',id2:'B'}]}

This was perfectly valid and worked fine in both Firefox and Internet Explorer. However, in Opera 9.26, I got a JavaScript error indicating that the JSON was not valid. It was then that I realized I was using an older version of jQuery, v1.2.2. Upgrading to the latest, 1.2.6 fixed the problem. Strangely, I could not find anything on their bug tracker indicating that such a problem (JSON and Opera) had been fixed.

What was even more interesting was that upgrading to Opera 9.50 also solved the problem independently; that is, things worked fine even with the older version of jQuery. This goes to show the importance of keeping your software up to date and highlights the complicated interactions between different browsers and client-side code in a web application.

Share This in jQuery

Peter Chng — Thu, 02 Aug 2007 04:35:29 +0000

Share This is an excellent WordPress plugin written by Alex King. The plugin provides a neat and customizable pop-up menu for allowing readers to easily share one of your blog posts using many of the social bookmarking or social websites out there. It’s an intelligent solution to the problem of having too many sharing icons that may potentially distract or irritate readers.

Since launching, Share This has become very popular, with many blogs using it. I recently began using the plugin for a site of mine, and was impressed by its usefulness. (And the icon project it launched) However, I had also decided to use the jQuery JavaScript framework (and its plugins) for this site, and since Share This uses Prototype for its JavaScript functionality, there were some conflicts.

So, I decided to do a minor re-write of Share This, altering only the JavaScript portion to use jQuery instead of Prototype.

jQuery?

I wanted to stick with jQuery for a variety of reasons, but mainly because I have more experience with it than with Prototype. I won’t get into an argument over which of the frameworks is better, and will instead stick to the “Unto each his own” line of thinking.

While jQuery generally works well with existing JavaScript, as it doesn’t alter the global namespace, and additionally has a “no-conflict” mode, some of the plugins that I wanted to use (specifically Thickbox) weren’t written for the no-conflict mode. The issue stems from the use of the “$” variable name. In jQuery, it’s a shortcut for the be-all-end-all function jQuery(), while in Prototype, it’s a shortcut for document.getElementById().

Share This in jQuery

Before I offer the download, I want to make it clear that this was a very minor change – no functionality was added or removed, as just the JavaScript portion was re-written (quickly) to support jQuery instead of Prototype. Again, it’s not better than the original Share This, only different. Furthermore, 100% full credit still belongs to Alex King, as this is barely a derivative work.

In order to use this version, you will need the jQuery framework as well as the Dimensions plugin. Their cumulative compressed sizes are comparable to the compressed size of the Prototype framework. You will need to link them to your site in your WordPress theme’s header.php file by adding lines like these, preferably between the head tags.

You can then replace the original share-this.php with the jQuery version in the zipped download. (You may want to backup the original file first, as always)

Download

Share This 1.4 for jQuery

Credit and Misc.

As mentioned before, all credit still belongs to Alex King for writing Share This in the first place. I haven’t really changed anything, just adapted it to work with jQuery and thought I’d like to make it available for everyone to use. It still works exactly as before, so configuring options and so forth isn’t any different.

What I changed was just the part of the plugin that outputs the JavaScript necessary to make Share This work. It’s just been changed to use jQuery instead of Prototype. I also commented out the parts of the plugin that link the Prototype framework (from WordPress) into the header. As mentioned before, you’ll have to link in the requisite jQuery script files yourself. Since it looks like WordPress will be moving over to jQuery, at least for the admin pages, this might be something worthwhile.

The JavaScript has been written in jQuery’s compatibility mode (using jQuery() instead of $), so you can continue to use Prototype on your site if you wish. As mentioned, this was a very quick rewrite, so not much has changed.

Some people have pointed out that Prototype is a lot larger than jQuery in terms of file size. This may be somewhat true, but when Prototype v 1.5.0 is packed, it comes in at only around 27 KB. jQuery packed is about 21 KB, but with the Dimensions plugin needed to make Share This work with jQuery adds another 4-5 KB, bringing the total size close to that of Prototype. So why use jQuery? Again, it’s just because I’m more familiar with it and like how jQuery expressions are formed, particularly with the ability to chain function calls.

Update

Bennett McElwee, author of many nice WordPress plugins (including some that I use on my own site), has already released a version of Share This in jQuery, seemingly two days before I published this post – what a coincidence! His appears to be more polished, though, as it doesn’t use the extra Dimensions plugin and also includes some nice effects. Definitely give it a try.