我想激活".next-img"功能区域中的点击事件

Question

我想激活一个'.next-img'单击事件从'main-img'功能区域中。我该如何实现？

$(".main-img").on('click', function(evt){
    let v = $(evt.currentTarget).data();
    //console.log(v.idx)
    let item = data[v.idx]
    function buildsubImg(){
        $("html, body").animate({ scrollTop: 0 }, "slow");
        $('#mo__sub-layer').empty();
        let mainTag = `<div class='main-img' data-idx='v.idx'><img 
        src='${item.src}'></div>`
        $('#mo__sub-layer').append(mainTag);        
        let items = data[v.idx].children;
        for(let item of  items){
            let tag = `<div class='sub-img'>
            <img src='${item.src}'>
            <div class='sub-img__brand'>TEST TEXT!!</div>
            <div class='sub-img__product'>TEST TEXT!!</div>
            <button class='sub-img__link'><i class="fas fa-mouse-pointer"> 
            </i>BUY NOW</button>
            <button class='sub-img__link'><i class="fas fa-map-marker-alt"> 
            </i>Location</button>
            </div>`
            $('#mo__sub-layer').append(tag);
        }

        let nextIdx = (v.idx + 1) % data.length;
        let itemNext = data[nextIdx];        
        let nextImgBtn =
        `<div class='next-btn' data-parent='${v.idx}' 
        data-next-idx='${nextIdx}'>
            <img src='${itemNext.src}'>
            <div class="next-btn__hover-txt">
                <span>next project</span>
            </div>
        </div>`;        
        $('#mo__sub-layer').append(nextImgBtn);
    }
    $('.next-btn').on("click", function (evt) {
        let v = $(evt.currentTarget).data();
        console.log(v)
        let item = data[v.nextIdx]
        $('#mo__sub-layer').empty();
        let mainTag = `<div class='main-img' data-idx='v.idx'><img 
        src='${item.src}'></div>`
        $('#mo__sub-layer').append(mainTag);        
        let items = data[v.nextIdx].children;
        for(let item of  items){
            let tag = `<div class='sub-img'>
            <img src='${item.src}'>
            <div class='sub-img__brand'>TEST TEXT!!</div>
            <div class='sub-img__product'>TEST TEXT!!</div>
            <button class='sub-img__link'><i class="fas fa-mouse-pointer"> 
            </i>BUY NOW</button>
            <button class='sub-img__link'><i class="fas fa-map-marker-alt"> 
            </i>Location</button>
            </div>`
            $('#mo__sub-layer').append(tag);
        }
        let nextIdx = (v.nextIdx + 1) % data.length;
        let itemNext = data[nextIdx];        
        let nextImgBtn =
        `<div class='next-btn' data-parent='${v.idx}' data-next- 
        idx='${nextIdx}'>
            <img src='${itemNext.src}'>
            <div class="next-btn__hover-txt">
                <span>next project</span>
            </div>
        </div>`;        
        $('#mo__sub-layer').append(nextImgBtn);
    })
    $('#mo__sub-layer').show();
    $('#mo__main-layer').hide();
})

Answer 1

只需将代码放在'main-img之外，请单击"侦听器"！

$('.next-btn').on("click", function (evt) {
    let v = $(evt.currentTarget).data();
    console.log(v)
    let item = data[v.nextIdx]
    $('#mo__sub-layer').empty();
    let mainTag = `<div class='main-img' data-idx='v.idx'><img 
src='${item.src}'></div>`
    $('#mo__sub-layer').append(mainTag);
    let items = data[v.nextIdx].children;
    for (let item of  items) {
        let tag = `<div class='sub-img'>
    <img src='${item.src}'>
    <div class='sub-img__brand'>TEST TEXT!!</div>
    <div class='sub-img__product'>TEST TEXT!!</div>
    <button class='sub-img__link'><i class="fas fa-mouse-pointer"> 
    </i>BUY NOW</button>
    <button class='sub-img__link'><i class="fas fa-map-marker-alt"> 
    </i>Location</button>
    </div>`
        $('#mo__sub-layer').append(tag);
    }
    let nextIdx = (v.nextIdx + 1) % data.length;
    let itemNext = data[nextIdx];
    let nextImgBtn =
        `<div class='next-btn' data-parent='${v.idx}' data-next- 
idx='${nextIdx}'>
    <img src='${itemNext.src}'>
    <div class="next-btn__hover-txt">
        <span>next project</span>
    </div>
</div>`;
    $('#mo__sub-layer').append(nextImgBtn);
})
$(".main-img").on('click', function(evt){
let v = $(evt.currentTarget).data();
//console.log(v.idx)
let item = data[v.idx]
function buildsubImg(){
$("html, body").animate({ scrollTop: 0 }, "slow");
$('#mo__sub-layer').empty();
let mainTag = `<div class='main-img' data-idx='v.idx'><img 
src='${item.src}'></div>`
$('#mo__sub-layer').append(mainTag);        
let items = data[v.idx].children;
for(let item of  items){
    let tag = `<div class='sub-img'>
    <img src='${item.src}'>
    <div class='sub-img__brand'>TEST TEXT!!</div>
    <div class='sub-img__product'>TEST TEXT!!</div>
    <button class='sub-img__link'><i class="fas fa-mouse-pointer"> 
    </i>BUY NOW</button>
    <button class='sub-img__link'><i class="fas fa-map-marker-alt"> 
    </i>Location</button>
    </div>`
    $('#mo__sub-layer').append(tag);
}

let nextIdx = (v.idx + 1) % data.length;
let itemNext = data[nextIdx];        
let nextImgBtn =
`<div class='next-btn' data-parent='${v.idx}' 
data-next-idx='${nextIdx}'>
    <img src='${itemNext.src}'>
    <div class="next-btn__hover-txt">
        <span>next project</span>
    </div>
</div>`;        
$('#mo__sub-layer').append(nextImgBtn);
}
})
$('#mo__sub-layer').show();
$('#mo__main-layer').hide();