Jquery:使用addEventListener将JSON值作为参数传递给函数

Question

情况是这样的：

$.each(data, function(index, element) {

        $('#bullets').append('<li id="demo" onclick="loadCards(\'' + element.id 
                    + '\','+index+')"><a href=\'#\'>' + element.name + '</a></li>');

});

这将添加一个内联javascript onclick，并使用两个参数id和name调用函数loadCards。

在普通的web应用程序中运行良好，但我创建了一个chrome扩展，并发现内联javascript不受支持。

我尝试添加event-listener，但无法传递参数。我尝试在循环后添加以下代码：

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#demo').addEventListener('click', loadCards( ));      
});  // have to pass id and name in loadCards.

如何将上述JSON中的id和name传递给事件侦听器？

Answer 1

尝试以下操作:将值设置为数据属性，并在单击事件处理程序中读取它

$(function(){
  $.each(data, function(index, element) {
     $('#bullets').append('<li id="demo" data-id="' + element.id + '" data-index="' + index + '" data-name="' + element.name + '"><a href=\'#\'>' + element.name + '</a></li>');
   });

   $(document).on('click', '#bullets li', function(){
        var id=$(this).data('id');
        var name= $(this).data('name');
        loadCards(id, name); 
    });
});

Answer 2

addEventListener的参数需要是函数引用，而不是对函数的调用。

document.querySelector('#demo').addEventListener('click', function() {
    loadCards(param1, param2 ); 
});