javascript - Dynamically create event and pass argument to function -
i have dynamically created <li> links through javascript, while creating onclick event not able pass argument function. please find script below 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 use below 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 following options 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 proceed or alternate method.
firstly, don't use incremental id attributes. it's pain maintain. instead, attach information thats unique each element using data attributes. common classname allow use 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' } (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>
Comments
Post a Comment