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

Dynamically create event and pass argument to function

本文关键字：参数传递 函数 创建 事件 动态      更新时间：2023-09-26

我已经通过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); })

    请就如何进行或任何其他方法提供建议。

    • 首先，不要使用增量id属性。维护起来很痛苦。相反，请使用data属性附加每个元素唯一的信息。然后，公共类名还将允许您使用单个委托的事件处理程序。试试这个：

    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>

    而不是使用附加到父元素的纯文本，你需要使用 jquery 创建元素，以便 jquery 知道它的存在。

    请参阅此处的答案，了解如何执行此操作

    相关文章：