How to make jquery events work in my code?

I am trying to add a function to some elements but it just doesn't work or show any error. It seems that the event is just not being inserted and I don't get why, since I am doing exactly the same process in another element and it works fine.

Here is the code where that doesn't work:

HTML:

<div id="mainSlider" style="height:100%"></div>

<div id="slider__marker_container">
   <div id="slider__marker_thumbnails"></div>
   <div id="slider__marker_icons"></div>
</div>

JQuery (Look for comment 'inserting dots' in the end)

$.getScript("../../data/mainSliderData.js", function() {

        const windowWidth = $(window).width()
        const mainSliderContainer = $('#mainSlider')
        mainSliderContainer.css('width', windowWidth * 7)

        const dataArr = $.map(returnData(), value => {
            return [value]
        })

        $.each(dataArr, (index, value) => {

            // Inserting images
            
            const mainSliderDiv = $('<div></div>')
            
            if (index === 0) {
                mainSliderDiv.css("background-image", `url(${value})`)
                mainSliderDiv.addClass('slider__img slide--js')

                mainSliderDiv.appendTo(mainSliderContainer)
            } else {
                mainSliderDiv.css({"background-image": `url(${value})`})
                mainSliderDiv.addClass('slider__img slide--js')
                
                mainSliderDiv.appendTo(mainSliderContainer)
            }

            // Inserting de thumbnails 
            const thumbnailDiv = $('<div></div>')
            const thumbnailImg = $('<img>')
            const thumbnailArrow = $('<i></i>')

            thumbnailDiv.attr('id', `slider__thumbnail_js-${index + 1}`)
            thumbnailDiv.addClass('slider__thumbnail')
            thumbnailImg.attr('src', value)
            thumbnailArrow.addClass('flaticon-down-arrow')
            
            thumbnailImg.appendTo(thumbnailDiv)
            thumbnailArrow.appendTo(thumbnailDiv)
            thumbnailDiv.appendTo('#slider__marker_thumbnails')

            // Inserting dots
            const sliderMarker = $('<i></i>')

            sliderMarker.addClass('flaticon-circle mainMarker--js')
            if (index === 0) {sliderMarker.addClass('flaticon-circle mainMarker--js markerT')}

            sliderMarker.on('click', () => test()) // => EVENT DOESN'T WORK

            sliderMarker.appendTo('#slider__marker_icons')

        })

    }) .fail(function( jqxhr, settings, exception ) {
        console.log('error:')
        console.log(exception)
    })

OUTCOME:

The same logic in another element, but here it works:

$.getScript('../../data/novosProdutosData.js', function () {

        $.each(returnData(), (index, value) => {

            const slideDiv = $('<div></div>')
            const slideLink = $('<a></a>')
            const slideImg = $('<img>')
            const slideDescriptionDiv = $('<div></div>')
            const slideDescriptionTitle = $(`<p>${value.nome}<br>${value.material}</p>`)
            const slideDescriptionPrice = $(`<p>R$ ${value.preco}</p>`)
            const slideDescriptionArrow = $('<i></i>')

            slideDiv.addClass('promo__container--slider-uni')
            slideImg.attr('src', value.img)
            slideDescriptionDiv.addClass('promo__container--slider-description')
            slideDescriptionPrice.addClass('promo__container--slider-preco')
            slideDescriptionArrow.addClass('flaticon-right-arrow promo__container--description-arrow')
            
            slideDescriptionTitle.appendTo(slideDescriptionDiv)
            slideDescriptionPrice.appendTo(slideDescriptionDiv)
            slideDescriptionArrow.appendTo(slideDescriptionDiv)
            slideImg.appendTo(slideLink)
            slideDescriptionDiv.appendTo(slideLink)
            slideLink.appendTo(slideDiv)
            slideDiv.appendTo('.promo__container--slider-bloco')

        })

        let dotsQtd = Math.floor(returnData().length / 4)

        for (let i = 0; i < dotsQtd; i++) {

            let dotIcon = $('<i></i>')

            dotIcon.addClass('flaticon-circle marker-amostras--js')
            if (i === 0) {dotIcon.addClass('flaticon-circle marker-amostras--js markerT2')}
            dotIcon.on('click', () => test()) // => EVENT WORKS FINE
            dotIcon.appendTo('.promo__container--header-markerSlider')
        }

    })

Any idea why this is happening will be very appreciated.

Thank you in advance.

EDIT:

I kept digging until find the problem. It hadn't anything to do with JQuery. This is a slider and I am using JS to change the position of the element with transform: translateX(), in order to change the image, the problem was laying there. When I applied transform to the slider, its parent div was was covering the div that wraps the icons, so I couldn't click on the icons, what made me thought that the problem was with the event. I hadn't thought about that because I didn't change anything on the structure of the code besides using transform: translateX(), so it didn't passed through my mind.