如何获取动态生成的文本框的ID?

时间:2011-04-22 01:56:11

标签: javascript jquery asp.net jquery-ui

如何使用jquery获取动态生成的文本框的id?我需要为相应的文本框触发TextChanged事件。后面的代码中的文本框没有方法引用。如何在代码隐藏中引用触发事件的任何方法。有人请帮忙。我不太了解jquery。我使用的整个脚本如下:

<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>

2 个答案:

答案 0 :(得分:3)

有两种方法:保留生成的元素,或在生成新元素时生成ID。

a)保留生成的元素

这要求您不使用innerHTML,而是创建元素(使用document.createElement或使用jQuery的$),然后您可以直接使用该元素(无需通过ID更多)。例如,使用jQuery:

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

b)生成ID

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

答案 1 :(得分:3)

我只想在你的iHtml中的文本框中添加一个类,然后使用.live()事件

用这个替换你的iHtml

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>';

然后添加直播活动

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

这是一个WORKING DEMO