Dynamically create event and pass argument to function

Question

I have dynamically created <li> links through javascript, but while creating onclick event I am not able to pass argument to a function. Please find the script below which is working without argument.

function printa() { $('#output').html(yDev[0]); }

for(var n=0;n<sns.length;n++) {
$("#ulDev").append('<li><a href="#" id=btnDev'+n+'>'+sns[n]+'</a></li>');
document.getElementById('btnDev'+n).onclick=printa
}

I need to use something like the below with arguments in function

function printa(m) { $('#output').html(yDev[m]); }

for(var n=0;n<sns.length;n++) {
$("#ulDev").append('<li><a href="#" id=btnDev'+n+'>'+sns[n]+'</a></li>');
document.getElementById('btnDev'+n).onclick=printa(n)
}

I have tried the following options but no luck.
1. onclick in <a> tags
2. $('#btnDev'+n).addEventListener('click', printa(n))
3. $("#btnDev"+n).on("click", function(evt){ evt.preventDefault(); printa(n); })

Kindly advice on how to proceed or any alternate method.

Rory McCrossan · Accepted Answer · 2015-07-07 14:58:39Z

Firstly, don't use incremental id attributes. It's a pain to maintain. Instead, attach information thats unique to each element using data attributes. The common classname will also then allow you to use a single delegated event handler. Try this:

for (var n = 0; n < sns.length; n++) {
    $("#ulDev").append('<li><a href="#" data-sns="' + n +'">' + sns[n] + '</a></li>');
}

$('#ulDev').on('click', 'a', function(e) {
    e.preventDefault();
    var sns = $(this).data('sns');
    $('#output').html(yDev[sns])
});

var sns = [ 'foo', 'bar' ];
var yDev = {
  0: 'foooooooo',
  1: 'baaaaaaar'
}

for (var n = 0; n < sns.length; n++) {
    $("#ulDev").append('<li><a href="#" data-sns="' + n +'">' + sns[n] + '</a></li>');
}

$('#ulDev').on('click', 'a', function(e) {
    e.preventDefault();
    var sns = $(this).data('sns');
    $('#output').html(yDev[sns])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulDev"></ul>

<div id="output"></div>

Community · Accepted Answer · 2017-05-23 10:26:45Z

0

Instead of using plaintext appended to your parent element, you need to create the element with jquery so jquery knows it exists.

See this answer here for how to do that

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jul 7, 2015 at 14:59

PBLC

2592 silver badges12 bronze badges

1 Comment

Rory McCrossan Over a year ago

This is not the case. You can insert the element however you like in to the DOM. jQuery will have no knowledge if it either way in this case as it was appended after the DOM was loaded.

Collectives™ on Stack Overflow

Dynamically create event and pass argument to function

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related