Прикрепить обработчики событий к нескольким текстовым полям (с похожим шаблонным идентификатором)?

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

Вы пометили вопрос с помощью 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 2

Вы можете использовать , начинающийся с селектор

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

Обратите внимание, что если вы создаете их на лету, вам может понадобиться прикрепить событиеиспользуя в прямом эфире :

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

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 */
}