javascript - 动态创建事件并将参数传递给函数

Question

我已经通过 javascript 动态创建了

链接，但是在创建 onclick 事件时我无法将参数传递给函数。请找到下面没有参数的脚本。

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
}

我需要在函数中使用类似下面的参数

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)
}

我尝试了以下选项，但没有成功。
1. 标签中的onclick
2. $('#btnDev'+n).addEventListener('click', printa(n))
3. $("#btnDev"+n).on("click", function(evt){ evt.preventDefault(); printa(n); })

请就如何进行或任何替代方法提出建议。

Answer 1

首先，不要使用递增的id 属性。维护起来很痛苦。相反，使用 data 属性附加每个元素的唯一信息。通用类名还允许您使用单个委托(delegate)事件处理程序。试试这个:

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>