Post
Ask Question

Click Event For Static and Dynamic Controls Using jQuery

Introduction

This article explains how to get a Click Event for static and dynamic controls in jQuery.

We often encounter problems while creating a dynamic control using jQuery and it's click event doesn't work, for those situations various methods can be used for getting the click.

I will first start with a static control, in other words I will first create a static button in HTML and will find it's click event, for most of you it's a simple task but for beginners it will be helpful.

Static Control Click

First of all you need to add a jQuery library to your application because only after that can jQuery work can be done. For that you can either download my source code and fetch the library from it or you can download the jQuery library from the jQuery website.

After downloading the DLL, you need to add it in the head section of your application just like this:

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="jquery-1.11.0.min.js"></script>  
  4. </head> 

Now add a button in the body section, if you are using a .Net button then you also don't need to worry because we will work on the id of the control.

So simply write this code:

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div id="DynamicDiv">  
  4.     <input type="button" id="clickMe" value="Click Me" />  
  5.     </div>  
  6.     </form>  
  7. </body> 

Now our basic work is completed and we can do the jQuery.

Some people might have seen that in some places a "$" sign is used and in some places "jQuery" is used at the start of the code, so now the question is "What is the difference between "S" and "jQuery?".

Answer: For writing jQuery code first thing you need to use is "$" (Dollar Sign), actually $ represents "jQuery", so even if you write "jQuery" instead of "$" it will also work similarly. But if your code has both "$" and "jQuery" then it would be better for you to use "$.noConflict()", this will help the code to eliminate the conflict among $, jQuery or anything else used.

Now our motive was to find the click of the button or any other control, so for that write this code in the <script></script> tags.

  1. <script>  
  2.     $(document).ready(function () {  
  3.         $('#click').click(function () {  
  4.             alert("Hey I am Static Control");  
  5.         });  
  6.     });  
  7. </script> 

This is the simplest way to catch the click event of any control. Here first of all I have called the .ready() function, it checks whether the DOM is ready to execute the JavaScript/jQuery code or not, after this I have found the click function of the button using the ID, when you are using the ID of a control then you need to use the Hash "#" before the ID, if you are calling the control using it's class name then dot (.) is used before the class name, after this I have called the click event using .click(), in this event you need to create a function that will execute on the click like here I have just shown an alert message inside the function().

On executing the code and after clicking the button this type of alert message will be shown:

Static Click

Dynamic Control Click

The code above will help you to get the click event of the static controls but if in any case the dynamic controls are created in your application then the code above might not wok for you. In that case you need to use the following methods.

Create Dynamic Controls

You might be thinking, how to create a dynamic control. That's very simple and very easy, you just need to use the .append() event with the control in which you want to add some dynamic controls and in that append event you need to write the HTML code similar to what you might have written in the body section and this will work for you, for example:

  1. <script>  
  2.     $(document).ready(function () {  
  3.         $('#DynamicDiv').append('<input type="button" id="click" value="Dynamic Button" />');  
  4.     });  
  5. </script> 

This code will create a dynamic button in your page.

Now how to get it's click, for that you first need to check the version of the library you added to your application because if you have added a version older than 1.9 then the .live() function will work for you but if you add a library of version 1.9 or later then .live() will not work and you need to use the .on() event for it.

First I am telling about the .live() event.

For getting the click of the button using the .live event this code will help you:

  1. <script>  
  2.     $(document).ready(function () {  
  3.         $('#DynamicDiv').append('<input type="button" id="dynamic" value="Dynamic Button" />');  
  4.         $('#clickMe').click(function () {  
  5.             alert("Hey I am Static Control");  
  6.         });  
  7.         $('#clickMe').live('click',function () {  
  8.             alert("Hey I am Dynamic Control");  
  9.         });  
  10.     });  
  11. </script> 

When using the .live() you first need to provide the the type of event you need to call and then a function needs to be created that will work depending on this event.

Now if you are not using .live() then the .on() event will help you: 

  1. $(document).on('click', '#dynamic', function () {  
  2. alert("Hey I am Dynamic Control");  
  3. }); 

 In the .on() event three things are defined, the first event name and second it's ID or class name and the third function, instead of $(document), you can provide the id of the container element, both will work the same.

Now you can run the code and you will see the similar output by the .live() and .on() events.

Dynamic Click


Similar Articles