Skip to main content

Dynamic Event Binding in JQuery


Create a sample form with button which used to create dynamic select tag and dynamic event binding


Here i am using the select tag for my test to bind the event dynamically. we are created a sample form that form contains one button for creating a dynamic select tag. We are going to write a change event for that dynamically created select tag. 

The following code may explain how can i write a events for dynamically created elements in html using JQuery. For that we need jquery.

Source Code:
<html>
<head>
<script src="jquery-1.6.js" type="text/javascript"></script>
<script>
var n=1;
$(document).ready(function(){
$("#createselect").click(function(){


var newelement=$(document.createElement('div')).attr('id','test'+n);
newelement.html('<label>select tag'+n+'</label><select id="selectid'+n+'" class="dynamicallycreated" ><option>option1</option><option>option2</option><option>option3</option></select>');
newelement.appendTo("#testing");
n++
});

$('select.dynamicallycreated').live('change',function(){
$(this).next('p').empty();
$(this).after("<p>"+$(this).val()+" is selected</p>");


});
});
</script>
</head>
<body>
<div id="testing">
</div>
<input type="button" id="createselect" value="create">


</body>
</html>    

This code is for creating any number of select tag and bind the change method for each element in dynamically. For that i used the live method also take class name as a selector of my test.
Labels:

Comments

Post a Comment

Popular posts from this blog

SFTP Integration in SSIS package Using WinSCP DLL

  In this blog, I am planning to write about SSIS SFTP Task details and reference sites, upload and download the files from SFTP server using SSIS package with help of the winscp library. Steps to configure the winscp DLL and Download Files 1.        Please download the DLL and required files from below path https://winscp.net/eng/downloads.php#additional 2.        Once Downloaded, use the below comments to add in Local GAC "Path to the gacutil exe \gacutil.exe" /i WinSCPnet.dll 3.        Please use the below URL as guide to implement the SSIS script task to download the files from SFTP using winscp as library https://winscp.net/eng/docs/library_ssis 4.        I am just briefing the steps based on the above URL what we can try in SSIS package. 5.        Please create the below variables in SSIS package which we need ...
Post a Comment
Read more

Geography Data Type – SQL Server

     Geography data type in SQL Server is a useful tool for storing and manipulating geographic data. It provides a set of functions and tools for working with geographical data, such as points, lines, and polygons. In this blog, we will explore the Geography data type in SQL Server with examples. Introduction to Geography data type Geography data type is a built-in data type in SQL Server that is designed to support the storage, manipulation, and analysis of geographic data. It is based on the Open Geospatial Consortium (OGC) Simple Feature Access specification, which provides a standard way to represent geographic data in a database. The Geography data type in SQL Server stores data in a geographic coordinate system, allowing you to represent points on the surface of the earth using longitude and latitude coordinates. You can also represent lines and polygons by defining a series of points that define the shape of the line or polygon. Creating a Geography data t...
Post a Comment
Read more

XML data type Functions – SQL Server

 The XML data type in MSSQL Server is a powerful tool for handling and manipulating XML data within a relational database system. In addition to storing XML data as a column in a table, SQL Server provides a number of XML functions and methods that allow for easy parsing, querying, and transformation of XML data. In this blog post, we will cover all XML data type methods available in MSSQL Server. value() Method: The value() method is used to extract a single value from an XML instance. This method accepts an XQuery expression as a parameter, which is used to identify the value to be extracted. The syntax of the value() method is as follows: xml . value ( XQuery expression , Data type ) For example, the following query extracts the value of the 'name' element from an XML column called 'MyXMLColumn': SELECT MyXMLColumn . value ( '(/Root/Person/Name)[1]' , 'varchar(50)' ) AS Name FROM MyTable   query() Method: The query() method i...
Post a Comment
Read more