How to fetch the id of dynamically generated textboxes?

Question

How is it possible to get the id of the dynamically generated textboxes using jquery?. I need to fire the TextChanged event for the corresponging textbox. There is no method reference for the textboxes in the code behind.How can i refer to any method in the codebehind on firing the event. Somebody please help. I dont know jquery much. The entire script im using is as as follows:

<script type="text/javascript">

$(init);

function init()
{
    $('#test').droppable(// Div Control
    {
        drop: handleDropEvent
    });

    $('a').each(function(idx, item) {
        $(item).draggable({ cursor: 'move', helper: 'clone' })
    });
}

$(function() {
    $("#draggable").draggable(); //Nothing to do with this div
});

function handleDropEvent(event, ui)
{
    var draggable = ui.draggable;
    document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}

function addColumn(column)
{
    var iHtml;
    // This code will generate a checkbox and a textbox. I need to fire the event of thus generated textboxes.
    iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;">&nbsp;' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input type="text" runat="server" id="aln' + column + '">&nbsp;</div>';

    return iHtml;
}
</script>

Answer 1

There's two ways: keep the generated element, or generate an ID when you generate your new element.

a) keep the generated element

This requires that you don't use innerHTML, but create the element (with document.createElement , or with jQuery's $ ), and then you can use the element directly (no need to call it by ID any more). For instance, with jQuery:

var container = $('#container');
var myDiv = $('<div id="myDiv"/>');
var myCheck = $('<input type="checkbox"/>');
myDiv.append(myCheck);
container.append(myDiv);

b) generate the ID

container.innerHTML = '<div id="myDiv"><input type="checkbox" id="myCheck"/></div>';
// and after this you can get them by ID:
var myCheck = $('#myCheck');

Answer 2

I would just add a class to the textbox in your iHtml then use .live() event

replace your iHtml with this

iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;">&nbsp;' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="myclass" type="text" runat="server" id="aln' + column + '">&nbsp;</div>';

then add the live event

 $('.myclass').live('change', function() {
    alert(' Live handler called.');
});

here is a WORKING DEMO