Click Event For Static and Dynamic Controls Using jQuery

Anubhav Chaudhary

12y60k10100Article

jQuery DynamicClick Event in jQueryDynamic Controls Click

10 Comments

Join the conversation! Your thoughts help the community grow.

Suraj Sharma8y ago
I have tried to do the same on my sample project with not much code(just to try it out) and it's working fine there but not on my main project.
Suraj Sharma8y ago
I have used the same code but i'm unable to handle the click event of my button. Already searched on SO but I didn't get any answer for this problem.
Sourabh Salve11y ago
what if ID of dynamically generated control is also dynamically generated then how to get that id
- Anubhav Chaudhary11y ago
  It's not a big issue, I am explaining with an e.g. Suppose you are creating some textboxes dynamically, provide them ID in a combination of static+dynamic value for e.g. txt1, txt2, txt3 here 1,2,3 are created dynamically, but provide them all same name, or you can make it vice versa i.e. same ID but dynamic name. Now create a click event for this static name/id and in that event check for it's second attribute i.e. name/id, if it matches your required textbox then do required work otherwise check the next textbox attribute.
Gowtham Rajamanickam11y ago
good
Vithal Wadje12y ago
very useful keep it up
Anubhav Chaudhary12y ago
But why are you saying "Welcome Back!" I didn't go anywhere, I love writing Articles and C-Sharpcorner is like my home, I have worked for it and when I am on C-Sharpcorner I feel like "yes this is mine".
- Dinesh Beniwal12y ago
  Happy to hear that, and I m so proud of you.
Anubhav Chaudhary12y ago
I'll Sir :)
Dinesh Beniwal12y ago
Welcome back Anubhav, Keep contributing.

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:

<head runat="server">
<title></title>
<script src="jquery-1.11.0.min.js"></script>
</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:

<body>
<form id="form1" runat="server">
<div id="DynamicDiv">
<input type="button" id="clickMe" value="Click Me" />
</div>
</form>
</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.

<script>
$(document).ready(function () {
$('#click').click(function () {
alert("Hey I am Static Control");
});
});
</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:

<script>
$(document).ready(function () {
$('#DynamicDiv').append('<input type="button" id="click" value="Dynamic Button" />');
});
</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:

<script>
$(document).ready(function () {
$('#DynamicDiv').append('<input type="button" id="dynamic" value="Dynamic Button" />');
$('#clickMe').click(function () {
alert("Hey I am Static Control");
});
$('#clickMe').live('click',function () {
alert("Hey I am Dynamic Control");
});
});
</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:

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

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