Tengo una matriz que quiero mostrar en una insignia, por lo que la he agregado como se muestra a continuación.

 attachmentArray.forEach((element, index) => { console.log(index, element.name) attachmentBadge.append(` <div id="attachmentBadge_` + index + `" class="badge bg-navy m-1"> <div id="file_list_` + index + `" class="d-flex align-items-center justify-space-between"> <span id="file_` + index + `">` + element.name + `</span> <span id="closeAttachmentBtn_` + index + `" value='` + index + `' class="btn btn-sm text-light closeAttachment"> &times; </span> </div> </div> `) });

También tengo una función para activar un archivo console.log cuando hago clic en

 <span id="closeAttachmentBtn_` + index + `" value='` + index + `' class="btn btn-sm text-light closeAttachment"> &times; </span>

pero cuando hago clic no funciona.

 $("div#attachmentBadge.closeAttachment").click(function() { console.log('clicked') })

¿Cuál es el método correcto para acceder a la función?