JQuery – bind events to Dynamically created HTML elements

In JQuery you can create html elements dynamically at any given time. But have you noticed, those you created dynamically, are not trigger any of the JQuery events. But those created dynamically using Jquery – bind events what we are going to do. So you In this article I will show you how to how to create html elements dynamically using JQuery and catch there events.

Setup JQuery environment

Setting up JQuery environment is pretty simple. Create a HTML page using your favourite developer environment. Your new webpage will look similar to below page;

<!DOCTYPE html ">
<html>
<head>
<title>Jquery bind events to Dynamically created HTML elements</title>
</head>
<body>
</body>
</html>

Lets add the JQuery core library reference to your new webpage. There are two ways to do this. Either you can download the JQuery library it self or you can use the CDN reference. Let us use the CDN version (Hope you have a working internet connection to work with CDN reference). You can add the following code line just below the title

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

Before you go any further we need to test JQuery reference is working. To check JQuery you can add following code snippet.

<script type="text/javascript">
 $(document).ready(function () {
 alert("Jquery is working...!");
 });
 </script>

Now save your code and open your webpage, if you get the message JQuery is working your reference set correctly.

Jquery reference check

 Create HTML elements Dynamically

Lets add a html button to our webpage like below;

<h2>Create Dynamic HTML elements</h2>
<input type="button" value="Create a TextBox Dynamically" id="createtextbox" />
Save and refresh the page, you will get a page like below;

the button that create dynamic html controls

Now lets create Dynamic HTML controls using JQuery. We can do it inside the button click event. In this case I will add a textbox and a html button. You can add the following button click event in your page just below the JQuery reference;

<script type="text/javascript">
 $(document).ready(function () {
    $("#createtextbox").click(function () {
       $('body').append("<input type='text' id='textbox' /><input type='button' id='dynamicbutton' value='Dynamic Button' />");
     });
 });
 </script>

Now save the page and click on the button, button click will create a TextBox and a Button like shown in the below image.

newly created html controls

Lets write the click events for both new html controls as follows;

//text box event
 $("#textbox").click(function () {
 alert("OK");
 });
 //dynamic button event
 $("#dynamicbutton").click(function () {
 alert("OK");
 });

Now save the code and refresh the page and create dynamic html elements again. Now click the new button and the Textbox both elements clicks suppose to give an alert message “OK” but there isn’t. This is not a bug. By the time we create the HTML controls the document is loaded and all the JQuery events are bound to all the elements present in the webpage. But for elements created dynamically are being isolated, because there is not reloading.

How to bind JQuery Events for HTML elements created Dynamically?

In JQuery this issue of dynamic HTML elements event handlers are defined very neatly. JQuery offer very handy method called .on() where can attache event handlers to the currently selected set of elements in the jQuery object. A very simple on() method call as follows;

$( "<Selector>" ).on( "click", function() {

alert( $( this ).text() );
});

Above code will bind the click event to a dynamically created html element provided as the selector. Lets change the code to map textbox and button events for dynamic ones in our page as follows;

//text box event
 $(document).on("click","#textbox",function () {
 alert("OK Textbox click");
 });
 //dynamic button event
 $(document).on("click", "#dynamicbutton", function () {
 alert("OK Button click");
 });

Now save the code and refresh the browser and click on the create button, you will get two html controls a button and a textbox. Now try click on the text box you will notice your click event fires for the dynamically created textbox. Below image shows the output;

textbox dynamic event bind

Similarly you can check the click event of the dynamically created button, it gives a similar screen as follows;

dynamic button event

Checkout the live demo

[/su_box]

Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.