Dynamically adding event listener. Function fires but how can I send a variable parameter?

Question

I'm building a table in JavaScript and it contains a cell with a link in it, which when clicked, should fire a function. The cell is being added in a loop, in which i is incremented with each cycle and I want embed i in my function as a parameter.

Using the code below, when I alert(i); in the receiving function, I'm not getting the correct number. For one thing, elements added regardless of the iteration, all have the number 3 (probably not co-incidentally, I am testing this on a 3 record data-source).

The code

// Add supplier name to cell as a link
var a = document.createElement('a');
var linkText = document.createTextNode(data[i].supName);
a.appendChild(linkText);
a.title = "Click to create a purchase order.";
a.href = "#";
alert('inserting '+i); // diagnostic line
a.onclick = function(){postData ('main/createPO.php', '', 'makePO(resp,'+i+')', '', '')};
td1.appendChild(a);
tr.appendChild(td1);

The above is in a for loop where the i is incremented.

The diagnostic alert, fires:

inserting 0
inserting 1
inserting 2

... but the embedded i always seems to be 3!

This is the important line:

a.onclick = function(){postData ('main/createPO.php', '', 'makePO(resp,'+i+')', '', '')};

Community · Accepted Answer · 2017-05-23 10:25:11Z

1

This person had the same problem as you, and there's a good answer for it: JavaScript closure inside loops – simple practical example

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Apr 2, 2013 at 23:17

crimson_penguin

2,7781 gold badge17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter White Over a year ago

Well done. I missed that because I didn't understand the term in the title closure. It works great.

Shazboticus S Shazbot · Accepted Answer · 2013-04-02 23:24:32Z

1

There's an easier way to get around your issue. I had a more complicated version of this problem.

for each element, just make a custom attribute.

$(a).attr("myValue", i);

Then on .click, just pass Number($(this).attr("myValue"));

answered Apr 2, 2013 at 23:24

Shazboticus S Shazbot

1,3292 gold badges16 silver badges27 bronze badges

3 Comments

Peter White Over a year ago

Thanks, but I try to avoid jQuery where possible, especially wnen in loops, because of the over-head. Interesting alternative though.

Shazboticus S Shazbot Over a year ago

I don't know off the top of my head how to do the equivalent without jQuery, but I'm positive there's a way to do this do custom attributes with simple JS (it might not be as simple as a.myValue = i, but it should be something like that).

Peter White Over a year ago

The answer I accepted worked fine. The solution was quite well described on the post linked to.

Collectives™ on Stack Overflow

Dynamically adding event listener. Function fires but how can I send a variable parameter?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related