Creating elements dynamically and adding functions with different parameters.

Question

I'm creating anchor tags dynamically and I want them to call a function that has a set parameter for each one.

Example:

<div class="AnchorHolder">
   <a onclick="someFunction(1)">someText</a>
   <a onclick="someFunction(2)">someText</a>
   <a onclick="someFunction(3)">someText</a>
</div>

I've tried

$("#AnchorHolder").append("<a>" + someText + "</a>").click(function (e) {
    someFunction(someIntVariable);
});

but instead connects all of the anchors to the IntVariables current value, whereas I wanted the previous ones.

How can I accomplish this?

DontVoteMeDown · Accepted Answer · 2014-03-10 18:13:36Z

1

Well, I would suggest you to try data attributes. As far I know they are made for that porpuse. See:

$("#AnchorHolder").append("<a href='#' data-myvar='" + someIntVariable + "'>" + someText + "</a>");

// Keep the event binding out of any loop, considering the code above will be called more than once...
$("#AnchorHolder").on('click', 'a', function (e) {
    alert($(this).data("myvar"));
});

Fiddle

edited Mar 10, 2014 at 18:13

answered Mar 10, 2014 at 18:07

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

Comments

Mike 'Pomax' Kamermans · Accepted Answer · 2014-03-10 18:01:56Z

1

If you just want the click on the new element, tack it onto that element, and not on the #AnchorHolder element:

var newAnchor = $("<a>" + someText + "</a>").click(function (e) {
  someFunction(someIntVariable);
});
$("#AnchorHolder").append(newAnchor);

Or, alternatively to get each <a> to call the someFunction with their postion-inside-the-div:

$("#AnchorHolder a").each(function(idx) {
  var a = $(this);
  a.click(function() { someFunction(idx); });
});

answered Mar 10, 2014 at 18:01

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

1 Comment

Kelsey Abreu Over a year ago

Well I tried it now and the older anchors are not able to call the function, just the latest one. Any idea why?

A J · Accepted Answer · 2014-03-10 18:16:31Z

1

You can always create a html element as following

   $('<a>').attr("onclick","fun('hi')").html('Some text').appendTo("#AnchorHolder");

Hope this helps

edited Mar 10, 2014 at 18:16

answered Mar 10, 2014 at 18:09

A J

2,14015 silver badges24 bronze badges

1 Comment

A J Over a year ago

@Kelsey Abreu : did this help you?

Collectives™ on Stack Overflow

Creating elements dynamically and adding functions with different parameters.

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related