jQuery自动完成UI小部件 - 在动态创建的表行元素上执行jQuery select事件

时间:2011-08-30 20:19:11

标签: javascript jquery html jquery-ui

我在表数据元素txtRow1的文本输入上执行了一个有效的jQuery自动完成功能。文本数据是远程的,来自mysql数据库,并由JSON返回为文本输入的“值”。返回的数据包括另一段文本,通过自动完成中的选择事件,将其填充到相邻的表数据元素tickerRow1。

在SO社区的帮助下,自动完成功能现在正在运行并处理动态创建的表的所有文本输入元素(因此txtRow1到txtRowN)。有javascript代码可以创建并命名表元素txtRoxN + 1和tickerRowN + 1.

但是,我对tickerRowN的id的select事件有问题。因为每次添加行时它都会更改,所以我不知道如何为所讨论的表数据的特定id调用select事件。

我已经做了很多搜索,但由于我是新手,我已经能够找到的唯一函数在你已经知道id时操作元素数据。这个id是动态创建的,所以我不知道如何构建语法。

谢谢你的时间。

更新:非常感谢JK,以下示例有效。我现在知道jsFiddle,并会尝试将其用于所有进一步的问题。以下代码适用于我的动态示例,但我不知道为什么。叹。

jsFiddle working example

1 个答案:

答案 0 :(得分:1)

function getRowId(acInput){
     //set prefix, get row number
     var rowPrefix = 'txtRow';
     var rowNum = acInput.attr("id").substring((rowPrefix.length));
     return rowNum;
}

$("#txtRow1").autocomplete({
    source: states,
    minLength: 2,
    select: function(event, ui) {
       var tickerRow = "#tickerRow" + getRowId($(this));
        //set ticker input
        $(tickerRow).val(ui.item.label);
    }
});

http://jsfiddle.net/jensbits/BjqNz/