Javascript 使用动态创建的id标记定位元素

所以我试着通过参考一系列其他的So主题来解决这个问题，但到目前为止都是空的。我试图用动态创建的（通过ajaxget请求）id标记来定位单个元素，这样我就可以对单个元素进行操作

当我单击其中一个相关按钮时，当前我的console.log检查返回：

单击了未定义的

这里是AJAX调用

 $.ajax({
        type: 'GET',
        url: '/electra/get_users/',
        data: {},
        success: function(data) {        
            for (i = 0; i < data.length; i++) {
                var myCol = $('<div id="col" class="col-sm-4"></div>');
                var myPanel = $(
                    '<div class="card-group"><div class="card"><div class="card-body"><h5 class="card-title">'+data[i]+'</h5><p class="card-text">Lorem Ipsum...</p><button class="card-btn" id=' + data[i] + 'FollowButton>Follow</button><button class="card-btn" id=' + data[i]+ 'ViewDashButton>View Dashboard</button></div></div></div>'
                    );
                myPanel.appendTo(myCol);
                myCol.appendTo('#contentPanel');

                document.querySelector("#" + data[i] + "FollowButton").addEventListener('click', function() {
                    var tag = data[i];
                    console.log("Clicked" + " " + tag);
                });
            };      
        };              
    }); 

$.ajax({
键入：“GET”，
url:“/electra/get_users/”，
数据：{}，
成功：函数（数据）{
对于（i=0；iLorem Ipsum…
FollowView仪表板'
);
myPanel.appendTo（myCol）；
myCol.appendTo（“#contentPanel”）；
document.querySelector（“#”+数据[i]+“FollowButton”）.addEventListener（'单击'，函数（））{
var tag=数据[i]；
log（“单击“+”+标记）；
});
};      
};              
}); 

$.ajax({
键入：“GET”，
url:“/electra/get_users/”，
数据：{}，
成功：函数（数据）{
对于（i=0；iLorem Ipsum…
FollowView仪表板'
);
myPanel.appendTo（myCol）；
myCol.appendTo（“#contentPanel”）；
document.querySelector（“#”+数据[i]+“FollowButton”）.addEventListener（'单击'，函数（））{
var标记=$（this.data（'idtext'）；
log（“单击“+”+标记）；
});
};      
};              
}); 

这并没有回答具体的问题，但我建议您了解如何处理您的场景，而不是为每个项目分配一个事件侦听器。要回答您的具体问题，即为什么得到

未定义的
-您的
I
循环值是全局的，因此当它到达
var tag=data[I]时
它不再是设置div/event处理程序时的值。您可以将数据[i]值添加为属性，并在单击按钮时使用它，如单击follow按钮的data idtext='+data[i]+'
 $.ajax({
    type: 'GET',
    url: '/electra/get_users/',
    data: {},
    success: function(data) {        
        for (i = 0; i < data.length; i++) {
            var myCol = $('<div id="col" class="col-sm-4"></div>');
            var myPanel = $(
                '<div class="card-group"><div class="card"><div class="card-body"><h5 class="card-title">'+data[i]+'</h5><p class="card-text">Lorem Ipsum...</p><button class="card-btn" data-idtext='+ data[i]+' id=' + data[i] + 'FollowButton>Follow</button><button class="card-btn" id=' + data[i]+ 'ViewDashButton>View Dashboard</button></div></div></div>'
                );
            myPanel.appendTo(myCol);
            myCol.appendTo('#contentPanel');

            document.querySelector("#" + data[i] + "FollowButton").addEventListener('click', function() {
                var tag = $(this).data('idtext');
                console.log("Clicked" + " " + tag);
            });
        };      
    };              
});