Javascript 将evt侦听器附加到动态创建的类

我有一些代码动态地向每列添加一个JSON元素。当到达第四列时，将出现一个循环，并将一个元素再次放置到第一列中：

first | second | third | fourth |
fifth | sixth  |seventh| 

当一个元素被创建时，一个类被动态地添加到每个元素中

我想添加一个事件监听器，其中单击一个元素会打开一个模式窗口，该窗口也会加载一些JSON数据——即，列中显示的数据会显示在模式中，具体取决于单击的元素

我遇到的问题是，当我的

.click（）

放在循环中（访问类选择器）时，JSON数据会重复呈现（这并不奇怪）。将

.click（）

放在循环外部会导致“Category”的JSON值

未定义

我怎样才能：

A.保留
。在循环中单击
，同时防止循环影响它和它

--或--

B.拥有
。在循环外单击
，同时识别JSON值

JS代码段：
var testjson={
“d”：{
“结果”：[{
“头衔”：“土豚”，
“类别”：“动物”，
“说明”：“我的测试说明”，
“TopTrainingCourse”：错误，
“ID”：1，
“修改”：“2019-03-05T20:13:46Z”，
“已创建”：“2019-03-05T20:13:36Z”
}, {
“标题”：“小熊猫”，
“类别”：“动物”，
“描述”：“Donec id dictum sem”，
“顶级培训课程”：没错，
“ID”：10，
“修改”：“2019-03-06T21:08:25Z”，
“已创建”：“2019-03-06T21:08:25Z”
}, {
“头衔”：“网球”，
“类别”：“体育”，
“描述”：“Mauris sagittis ligula”，
“顶级培训课程”：没错，
“ID”：11，
“修改”：“2019-03-06T21:08:35Z”，
“已创建”：“2019-03-06T21:08:35Z”
}]
}
}
导出默认类{
构造函数（）{
}
loadTopCourses（）{
让arrTop=testjson.d.results
.filter（x=>x.TopTrainingCourse===true）
.filter（（el，idx，self）=>{//无重复项
返回（idx==self.map（el=>el.Category.indexOf（el.Category））
})
.map（x=>{
返回{
“类别”：x.类别，
“标题”：x.标题
}
});
var-curIndex=0；
$.each（arrTop，函数（idx，val）{
curIndex+=1；
$（“div.top-training-div>div[col=”“+curIndex+”]））
.append（“+”&BlackTrianglerRight；“+val.Category+”）
//.click（function（）{/------------这将呈现模式数据，但数据受循环影响
//$（“.modal title”）.append（val.Category）
// })
if（curIndex==4）{
curIndex=0；
}
})
$（“.categoryName”）。单击（函数（e）{/----------无法识别`Category`
$（“.modal title”）.append（e.Category）
console.log（e.Category）
})
}//--------------加载到课程中
}

情态动词：

关



更新：
点击一个类别会打开模态，并在模态中显示该类别，但点击第二个类别会将第二个类别附加到第一个类别——这是一个比我更雄辩的类别

        var curIndex = 0;
        $.each(arrTop, function(idx, val) {
            let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

            let modalTrigger = $('<div />', {
                'data-toggle': 'modal',
                'data-target': '#modal-id',
                'data-category': val.Category,
                'class': 'categoryName',
                'text': val.Category
            });

            // let triangleRight = $('<span />', {
            //     'class': 'triangle-right',
            //     'text': '&blacktriangleright;'
            // });

            // modalTrigger.append(triangleRight);

            targetDiv.append(modalTrigger);

            curIndex++;

            if(curIndex == 4) {
                curIndex = 0;
            }

        })

        $(document).on('click', '.categoryName', function () {
            $('.modal-title').append($(this).data('category'));
            console.log($(this).data('category'));
        });

    } // ------------------ loadTopCourses

}

var curIndex=0；
$.each（arrTop，函数（idx，val）{
设targetDiv=$（“div.top-training-div>div[col='”+curIndex+']）；
设modalTrigger=$（''）{
“数据切换”：“模式”，
“数据目标”：“模态id”，
“数据类别”：值类别，
'class'：'categoryName'，
“文本”：值类别
});
//让三角形光线=$（''）{
//“类”：“直角三角形”，
//“文本”：“BlackTrianglerRight；”
// });
//附加（三角光）；
targetDiv.append（modalTrigger）；
curIndex++；
if（curIndex==4）{
curIndex=0；
}
})
$（文档）.on（'click'，'categoryName'，函数（）{
$（'.modal title'）.append（$（this.data（'category'））；
console.log（$（this.data（'category'））；
});
}//--------------加载到课程中
}
如果要将元素动态添加到dom中，请从循环中删除。单击，然后尝试将单击事件处理程序更改为此。我还清理了添加.categoryName元素的方式

var curIndex = 0;
$.each(arrTop, function (idx, val) {
    var targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

    var modalTrigger = $('<div />', {
        'data-toggle': 'modal',
        'data-target': '#modal-id',
        'data-category': val.Category,
        'class': 'categoryName'
    });

    var triangleRight = $('<span />', {
        'class': 'triangle-right',
        'text': '&blacktriangleright;'
    });

    modalTrigger.append(triangleRight);

    targetDiv.append(modalTrigger);

    curIndex++;
    if (curIndex == 4) {
        curIndex = 0;
    }

});

$(document).on('click', '.categoryName', function () {
    $('.modal-title').text($(this).data('category'));
    console.log($(this).data('category'));
});

var curIndex=0；
$.each（arrTop，函数（idx，val）{
var targetDiv=$（“div.top-training-div>div[col='”+curIndex+']）；
var modalTrigger=$（''{
“数据切换”：“模式”，
“数据目标”：“模态id”，
“数据类别”：值类别，
“类”：“categoryName”
});
var TrianglerRight=$（''{
“类”：“直角三角形”，
“文本”：“BlackTrianglerRight；”
});
附加（三角光）；
targetDiv.append（modalTrigger）；
curIndex++；
if（curIndex==4）{
curIndex=0；
}
});
$（文档）.on（'click'，'categoryName'，函数（）{
$（'.modal title'）.text（$（this.data（'category'））；
console.log（$（this.data（'category'））；
});
Hi@Nicolay，当你说添加数据属性时。你的意思是：
class=\“categoryName\”data attribute='data'>“+etc
？很抱歉，它看起来是这样的：''类别名称显示在模式中，但单击另一个类别会将第二个类别附加到第一个类别---我将发布一个带有屏幕截图的代码更新。更改$（'.modal title'）。将（$（this.data（'category'））追加到$（'.mo'）
        var curIndex = 0;
        $.each(arrTop, function(idx, val) {
            let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

            let modalTrigger = $('<div />', {
                'data-toggle': 'modal',
                'data-target': '#modal-id',
                'data-category': val.Category,
                'class': 'categoryName',
                'text': val.Category
            });

            // let triangleRight = $('<span />', {
            //     'class': 'triangle-right',
            //     'text': '&blacktriangleright;'
            // });

            // modalTrigger.append(triangleRight);

            targetDiv.append(modalTrigger);

            curIndex++;

            if(curIndex == 4) {
                curIndex = 0;
            }

        })

        $(document).on('click', '.categoryName', function () {
            $('.modal-title').append($(this).data('category'));
            console.log($(this).data('category'));
        });

    } // ------------------ loadTopCourses

}

var curIndex = 0;
$.each(arrTop, function (idx, val) {
    var targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

    var modalTrigger = $('<div />', {
        'data-toggle': 'modal',
        'data-target': '#modal-id',
        'data-category': val.Category,
        'class': 'categoryName'
    });

    var triangleRight = $('<span />', {
        'class': 'triangle-right',
        'text': '&blacktriangleright;'
    });

    modalTrigger.append(triangleRight);

    targetDiv.append(modalTrigger);

    curIndex++;
    if (curIndex == 4) {
        curIndex = 0;
    }

});

$(document).on('click', '.categoryName', function () {
    $('.modal-title').text($(this).data('category'));
    console.log($(this).data('category'));
});