Question

我有几个文本框是根据我从其他来源获得的一些结果动态生成的。我想在这些文本框中添加一些事件处理程序来捕获任何按键，并确保输入的任何内容都是数字。

我根据JSON响应中的数组长度生成这些文本框，如下所示：

for(i=0;i<data.routesout.length;i++)
{           
            content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>';
            content += '<input type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent>';            
}

如何将单个事件处理程序附加到所有这些潜在输入？

Answer 1

您可以使用starts with选择器

$('input[id^="route"]').keyup(function(){...

请注意，如果您是动态创建这些内容，则可能需要使用live附加活动：

$('input[id^="route"]').live('keyup', function(){...

Answer 2

你用jQuery标记了这个问题，所以我想知道为什么你不使用这个库来构建你的内容：

var content = [];
for (var i = 0; i < data.routesout.length; ++i) {
  content.push($('<label/>', { 'for': 'route' + i, text: data.routesout[i].name }));
  content.push($('<input/>', { change: yourEventHandler, type: 'text', name: 'route' + i, id: 'route' + i, value: date.routesout[i].percent, change: yourEventHandler }));
}

通过这样做，您可以在构造处理程序时按元素绑定处理程序元素。（我使用“更改”作为示例，但您可以以相同的方式为任何事件绑定处理程序。）

最后，您可以随意附加所有已创建的元素，也可以随意附加它们而不是构建数组。

Answer 3

这个怎么样？

for(i=0;i<data.routesout.length;i++){           
  content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>';
  content += '<input onkeypress="doSomething(this)" type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent + '>';            
}

function doSomething(element){
  /* this function will be called when user presess key inside a textbox */
}

将事件处理程序附加到多个文本框（具有相似的图案ID）？

3 个答案: