Event-handlers aan meerdere tekstvakken toevoegen (met id's met een vergelijkbare patroon)?

Question

Event-handlers aan meerdere tekstvakken toevoegen (met id's met een vergelijkbare patroon)?

Ik heb verschillende tekstvakken die dynamisch worden gegenereerd op basis van enkele resultaten die ik van een andere bron krijg. Ik wil eventhandlers toevoegen aan deze tekstvakken om elke toetsaanslag te vangen en ervoor te zorgen dat alles wat wordt ingevoerd numeriek is.

Ik genereer deze tekstvakken op basis van de lengte van een array binnen een JSON-antwoord, zoals zo:

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

How can I attach a single event handler to all of these potential inputs?

0

toegevoegd 27 oktober 2011 op 02:42 de auteur sxthomson

Bekeken: 27

de bron

3 antwoord

Je hebt de vraag getagd met jQuery, dus ik vraag me af waarom je de bibliotheek niet gebruikt om je inhoud te bouwen:

var content = [];
for (var i = 0; i < data.routesout.length; ++i) {
  content.push($('', { '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 }));
}

Door het op die manier te doen, kunt u de handler per element binden tijdens het samenstellen ervan. (Ik heb 'wijzigen' als voorbeeld gebruikt, maar je kunt handlers voor elke gewenste gebeurtenis op dezelfde manier binden.)

Aan het einde kunt u alle gemaakte elementen toevoegen zoals u wilt, of u kunt ze toevoegen terwijl u werkt in plaats van een array te maken.

3

toegevoegd 27 oktober 2011 op 02:49 de auteur Pointy

de bron

Ik ben redelijk nieuw voor jQuery (en webprogrammering in het algemeen, meer een desktop .NET ontwikkelaar als ik eerlijk ben), dus ik wist niet dat je dat kon doen. Ik vind het echt heel leuk, een stuk netter. Dank daarvoor!

toegevoegd 27 oktober 2011 op 03:00, de auteur sxthomson, de bron

de auteur Adam Hopkinson · Answer 1 · 2011-10-27T02:45Z

U kunt de begint met selector gebruiken

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

Houd er rekening mee dat als u deze on the fly maakt, u de gebeurtenis mogelijk moet koppelen met live :

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

de auteur Marian Bazalik · Answer 2 · 2011-10-27T02:51Z

Hoe zit het met dit?

for(i=0;i' + data.routesout[i].name + '(%)';
  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 */
}