Javascript 如何使jquery事件在我的代码中工作？

我正在尝试向某些元素添加函数，但它不起作用或显示任何错误。似乎事件只是没有被插入，我不明白为什么，因为我在另一个元素中执行完全相同的过程，并且工作正常

以下是不起作用的代码：

HTML:

JQuery（在末尾查找注释“插入点”）

$.getScript（“../../data/mainsilderdata.js”，函数（）{
const windowWidth=$（window）.width（）
常量mainSliderContainer=$（“#mainSlider”）
mainsiledcontainer.css（'width'，windowWidth*7）
const dataArr=$.map（returnData（），value=>{
返回[值]
})
$.each（dataArr，（索引，值）=>{
//插入图像
常量mainSliderDiv=$（''）
如果（索引==0）{
css（“背景图像，`url（${value}）`）
mainsilderdiv.addClass（'slider\uu img slide--js'）
mainSliderDiv.附件（mainSliderContainer）
}否则{
css（{“背景图像”：`url（${value}）`}）
mainsilderdiv.addClass（'slider\uu img slide--js'）
mainSliderDiv.附件（mainSliderContainer）
}
//插入反缩略图
常量thumbnailDiv=$（''）
常量thumbnailImg=$（''）
sliderMarker.addClass（'flaticon-circle主标记--js'）
if（index==0）{sliderMarker.addClass（'flaticon-circle mainMarker--js-markerT'）}
sliderMarker.on（'click'，（）=>test（））/=>事件不起作用
sliderMarker.appendTo（“#slider_umarker_icons”）
})
}).失败（功能（jqxhr、设置、异常）{
console.log（'错误：'）
console.log（异常）
})

结果：

在另一个元素中使用相同的逻辑，但在这里它起作用：

$.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')
        }

    })

$.getScript（'../../data/novosProdutosData.js'，函数（）{
$.each（returnData（），（索引，值）=>{
常量slideDiv=$（''）
常量slideLink=$（''）
常量slidemg=$（''）
addClass（'flaticon-circle标记amostras--js'）
如果（i==0）{dotIcon.addClass（'flaticon-circle marker amostras--js markerT2'）}
dotIcon.on（'click'，（）=>test（））/=>事件工作正常
dotIcon.appendTo（'.promo__容器--标题标记滑块'）
}
})

任何关于为什么会发生这种情况的想法都将非常感激

先谢谢你

编辑：

---

我一直在挖掘，直到找到问题。这与JQuery无关。这是一个滑块，我使用JS通过

transform:translateX（）更改元素的位置

，为了更改图像，问题就在那里。当我对滑块应用

transform

时，它的父div覆盖了包裹图标的div，因此我无法单击图标，这让我认为问题出在事件上。我没有想到这一点，因为我没有更改struc上的任何内容除了使用transform:translateX（），代码的真实性，所以我没有想到它。

首先，检查事件是否到达TEST（）函数

---

第二，为什么在这里使用promise？据我所知，您只需要on doc ready即可。任何其他操作都可以通过on（“eventname”，function（））完成你好。我已经检查了这个函数，这是我做的第一件事。还没有找到它。

你只需要在doc ready上使用它。
我没有把它放在这里，但我正在这样做。
getScript
被它包装。
任何其他操作都可以用on（“eventname”，function（））完成
：这就是重点，它应该可以工作，可能有一些细节我看不到。正如你所看到的，在第二个例子中，代码可以工作，并且它的逻辑与第一个例子相同。这就是欺骗我的地方。你能走多远！？这是主要问题。出于某种原因，你的承诺不会触发。我不知道。测试我可以做的是尝试使用其他元素启动它，它可以工作。例如，我尝试使用主元素
mainsilderdiv
，它在同一个循环中创建，工作正常。问题似乎只是
sliderMarker
。但我看不到在哪里。我只是找到了它，也许。const是const-一旦设置了它，你就可以不要更改它。让我们可以始终在当前函数内更改，并且在当前函数内的函数，var可以在代码（）周围更改。因此：将
const sliderMarker=$（''）
更改为
let sliderMarker=$（''）
$.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)
    })

$.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')
        }

    })