Assigning onkeyup event to multiple objects at once

Question

I am working with qualtrics and I am trying to customize their matrix control. I am trying to loop through a matrix with 8 rows and 4 columns where each cell contains a textbox and assign each textbox an onkeyup event like so:

for (var j=1; j< 9; j++){
        row_txt[j] = [];
        for (var k=1; k<5; k++){
            txt1= $('QR~QID2~'+j+'~'+k);
            txt1.onkeyup=function(){alert(j+','+k);};
        }
}

However, the onkeyup event returns "9,5" for each textbox changed. Why isn't it displaying the correct indices? How can I assign the same onkeyup event to multiple objects with the corresponding parameters j and k ?

Thank you

You should just attach one event to the container, and use `event.target` to find the textarea that triggered it. Research event delegation. — Niet the Dark Absol, Dec 25 '13 at 00:46
@NiettheDarkAbsol - you can only use delegation if you don't intend to override the default behavior (e.g. block some keys, apply transformations, etc...). We don't know what they're actually intending to do in their event handler. — jfriend00, Dec 25 '13 at 00:53

jfriend00 · Accepted Answer · 2013-12-25T01:33:22.520

2

The issue with the value of j and k is that the actual keyup event occurs sometime in the future. When that event occurs, the values of j and k have gotten to the end of the for loop and thus all event handlers will show the same values.

The usual way to fix this is by adding a closure that freezes the values of j and k separately for each event handler.

for (var j=1; j< 9; j++){
    row_txt[j] = [];
    for (var k=1; k<5; k++){
        (function(j, k) {
            txt1= $('QR~QID2~'+j+'~'+k);
            txt1.onkeyup=function(){alert(j+','+k);};
        })(j, k);
    }
}

Also, I'm curious what you're doing with this:

$('QR~QID2~'+j+'~'+k);

That will create something like this:

$('QR~QID2~1~9);

Are you actually using HTML tags with that tagname or should this be a class name or an id (e.g prefaced with a . or #)?

edited Dec 25 '13 at 01:33

answered Dec 25 '13 at 00:48

jfriend00

683,504
96
985
979

Wow, and I thought I was bad when it comes to answering duplicates XD – Niet the Dark Absol Dec 25 '13 at 00:50
@NiettheDarkAbsol - yes it is a duplicate in concept. But, the challenge for people who have this particular problem is that they often don't know how to take someone else's solution and apply it exactly to their code in their problem. That's why I sometimes offer to apply it their situation. – jfriend00 Dec 25 '13 at 00:52
$('QR~QID2~1~9); is the Id of the textbox inside a cell of the matrix – ivan Dec 25 '13 at 01:18
Onkeyup I'm trying to re-add the total for the row for which one of the cells was changed. I am new to js so I didn't really know what to look up. I will check out delegation and the answer for the question I might have duplicated – ivan Dec 25 '13 at 01:22
@ivan, if it's an id, then you need `#` in front of it for the CSS selector unless you're using some homemade `$` function that isn't taking a CSS selector. – jfriend00 Dec 25 '13 at 01:32
Yes thank you, I know. That is qualtrics selector apparently. – ivan Dec 25 '13 at 01:56
it worked like a charm, thank you. i will read up on closures in js now – ivan Dec 25 '13 at 04:55

Assigning onkeyup event to multiple objects at once

1 Answers1