.NET Answers

ASP.NET, HTML, CSS, Visual Studio, CSharp, VB.NET and other programming items of interest.
Subscribe
  • Home
  • About Me
  • Advertising
  • Click Here to Ask a question
    • Privacy Policy
  • Site Map

jQuery – Events

December 02, 2008 By: Dave

As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if you want to simulate the clicking of a button.

Of course, if you are going to fire an event, you’ll probably need some sort of event listener setup to handle that.

We will address firing events first since it has the least amount of code needed.

All you need to do is select the element or elements using the selectors we’ve already discussed and then call the method trigger(’eventname’).

So, to click a button, your code might look something like this:

$("#main").trigger('click');

Since the click method is so common, jQuery has a shortcut method, click(), that does the same thing, so we can rewrite our code as:

$("#main").click();

But if we click a button, we probably want some JavaScript to execute because of it.  This is where jQuery makes life much easier for the JavaScript programmer.

If you are familiar with JavaScript you are probably most familiar with attaching code to your HTML elements by using the on____ attributes.  To attach a method to the click event of the anchor tag you might write something like:

<a href="#" onclick="method();" >text</a>

If you were particularly clever, you might do some sort of event binding using code:

document.getElementById('anchorId').onclick = functionName;

But even doing that we are left with the ugly potential of having already assigned a function to the element, in which case this code would overwrite it.

In fact, if you’ve been coding JavaScript for a while, you are probably quite familiar with the problem of needing to add an event handler to the onload event of the document only to find out that doing so wiped out some critical JavaScript code that was already assigned to that event.

You’ll be happy to know that assigning code to an event in jQuery is both simple and non-destructive.

$('#anchorId').bind('click',function()
{ //code goes here
})

This code would normally be placed inside the ready handler that you’ve seen in previous posts so that your code would ultimately look something like this:

$(function() {
    $('#anchorId').bind('click', function()
    { //code goes here
    })
});

And since the click event is so common, we can replace bind(’click’,function…) with click(function()….)

$(function() {
    $('#anchorId').click( function()
    { //code goes here
    })
});

And if someone decides to attach another method to the same click event, both methods will run.

 

Other post in jQuery
  • jQuery - The Man, The Myth, The Legend - October 8th, 2008
  • Getting started with jQuery and ASP.NET - October 15th, 2008
  • jQuery - Explaining Last Week's Code - October 21st, 2008
  • Friday Books - &quot;Learning jQuery&quot; - October 24th, 2008
  • jQuery Simple Selectors - October 28th, 2008
  • Friday Books - &quot;jQuery in Action&quot; - October 31st, 2008
  • jQuery Selectors - Looks just like CSS - November 6th, 2008
  • VS2008 SP1 Hotfix to Support &quot;-vsdoc.js&quot; IntelliSense Doc Files - November 11th, 2008
  • jQuery Looks like XPath - November 12th, 2008
  • jQuery - class manipulation - November 19th, 2008
  • jQuery - Events - December 2nd, 2008
  • Host jQuery at Google (with Intellisense support) - December 10th, 2008
  • jQuery - Calling Your Own Functions - December 16th, 2008
  • Friday Books - jQuery Reference Guide - December 19th, 2008
  • jQuery - Creating Plug-ins - December 23rd, 2008
  • jQuery - Loading Partial Content - December 30th, 2008
  • jQuery - Positioning Elements - January 6th, 2009
  • AjaxToolKit TabControl Disabled Tab - January 12th, 2009
  • jQuery, JSON, and ASP.NET - January 15th, 2009
  • Review of the MDC at NYC - January 21st, 2009
  • jQuery - Retrieving HTML Fragments - January 22nd, 2009
  • jQuery GUI - Drag - February 3rd, 2009
  • jQuery - Drop - February 12th, 2009
  • jQuery UI - Resizable w/ ASP.NET Themes - February 18th, 2009
  • jQuery, bgiframe and IE6 z-order hacks - February 19th, 2009
  • jQuery - Sliders (scrollbars to the rest of us) - March 4th, 2009
  • jQuery - Using Slider as a Scrollbar - March 12th, 2009
  • jQuery - Auto Scrolling the Slider - March 23rd, 2009
  • Live Presentation of jQuery - March 23rd, 2009
  • Just a Week Away! - April 7th, 2009
  • jQuery Tabs - April 9th, 2009
  • jQuery Demos From Last Tuesday&rsquo;s Presentation - April 16th, 2009
  • jQuery – Accordion - May 6th, 2009
  • CustomValidationControl and jQuery - May 11th, 2009
  • Mixing ASP.NET, jQuery and JSON - May 12th, 2009
  • jQuery Progressbar - May 20th, 2009
  • jQuery &ndash; Dialog - June 2nd, 2009
  • jQuery &ndash; Modal Dialog - June 9th, 2009
  • Does jQuery Make Us Lazy? - June 18th, 2009
  • jQuery Dialog &ndash; With Validation Controls - June 25th, 2009
  • jQuery &ndash; Date Picker - July 2nd, 2009

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Related Post

  • Does jQuery Make Us Lazy?
  • jQuery – Dialog
  • jQuery Progressbar
Bookmark to:

Add to Del.icio.us Add to digg Add to DotNetKicks Add to DZone Add to Facebook Add to Slashdot Add to Stumble Upon Add to Technorati
Hide Sites
Tags: events, javascript, jQuery

2 Responses to “ jQuery – Events ”

  1. # 1 Dew Drop - December 2, 2008 | Alvin Ashcraft's Morning Dew Says:
    December 2nd, 2008 at 8:45 am

    [...] jQuery – Events (Dave M. Bush) [...]

  2. # 2 2008 December 03 - Links for today « My (almost) Daily Links Says:
    December 3rd, 2008 at 6:11 am

    [...] Dave Bush on jQuery – Events [...]

← Forcing Extension Methods to Be Used
Finding a CSS Class Definition →
  • Search

  • Subscribe

    U COMMENT
    I FOLLOW

    Subscribe in a reader

    OR

    Subscribe via e-mail

    Enter your email address: 

    Delivered by FeedBurner

     

  • Follow Me

    • Twitter
    • FaceBook
    • Digg
    • StumbleUpon
    • Propeller
    • Delicious
    • Plaxo

     

  • Recent Posts

    • ASUS Eee PC 1005HA-PU1X-BK Black Netbook
    • jQuery – Date Picker
    • Using VB.NET From CSharp
    • iTextSharp – Adding Images
    • Hungarian Notation – Use What Works, Spit Out The Bones
    • Pre Order Windows 7
    • jQuery Dialog – With Validation Controls
    • iTextSharp – The easy way
    • Structure of my ASP.NET Web Applications
    • 35% Off Accronis True Image 2009 Home
    • VB.NET Hide Module Name
    • ASP.NET/VB.NET – Video Training
    • Does jQuery Make Us Lazy?
    • PDFs Using iTextSharp
    • Programming SEO – Ping



  • Advertise on this site through Lake Quincy Media
  • DotNetNuke Sponsor

     

    Most Valuable Blogger
  • Sponsor

  • Categories

    • Advanced CSharp
    • Advanced VB.NET
    • ASP.NET MVC
    • Did you know
    • DotNetNuke – Module Development
    • DotNetNuke – Skinning
    • internationalization
    • iTextSharp
    • jQuery
    • none
    • Seach Engine Optimization
    • Silverlight
    • SQL For Programmers
    • Twitter
    • winforms
  • Cloud

    .net ajax architecture asp.net book books containers csharp css dal dataset datasets dotnetnuke events gridview images internationalization internet explorer javascript jQuery json linq listview modules ms-sql MVC objectdatasource programming reflection seo Silverlight skinning sql testing tsql tutorial Twitter twitterizer vb.net video view Vista visual studio webservice WordPress
  • Archives

    • July 2009
    • June 2009
    • May 2009
    • April 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • October 2007
  • Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
    • Privacy Policy
  • Calendar

    December 2008
    S M T W T F S
    « Nov   Jan »
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  • Blogroll

    • Alvin Ashcraft’s Morning Dew
    • ASP.NET Consulting
    • Life Hacker
    • Remember Anything
    • The Price of Their Toys
    • Uncategorized Thought


.NET Answers © 2007 - 2008 All Rights Reserved.
Entries and Comments.