JavaScript - 根据 div id 列表侦听 x 点击事件并执行操作

Question

我有一个div id的列表呈现为上下文从django视图的HTML模板:

list = ['id1','id2',...]

我想做什么

我正试图"听"从这个列表中点击一个带有id的按钮(id的数量对于每个客户是不同的)，并在单击后执行操作。

我在没有任何js知识的情况下尝试做的事情:

var list = $('#list').val();
var len = list.length;

    for (i=0; i<len; i++){
        document.getElementById(list[i]).onclick = function () {
            report.setPage(list[i]);
       };
    };

结果

我得到一个错误'Uncaught TypeError: Cannot set property 'onclick' of null'这让我相信我完全错了。

我做错了什么?我怎样才能达到我的目标?

Answer 1

onClick属性在HTML中使用，但在JS中你需要使用addEventListener:

var list = $('#list').val();
var len = list.length;

    for (i=0; i<len; i++){
    var element = document.getElementById(list[i]);
     element.addEventListener('click', function() {
       report.setPage(list[i]);
     })
    };

更多细节:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener