我想在“ main-img”功能区域之外激活“ .next-img”点击事件

Question

我想在“ main-img”功能区域之外激活“ .next-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();