Jquery 在触发其他函数后，单击“函数不触发”

我有一个图库网站，它创建了一串缩略图，然后显示一个更大版本的缩略图，每4秒循环一次。我编写了一个单击函数，用户可以通过单击缩略图来选择特定的图像。大屏幕显示图像将立即转换为用户单击的图像，计时器将被重置。当我尝试实现一个函数时遇到了一些问题，该函数在用户将鼠标悬停在显示图像上时暂停幻灯片放映，然后在mouseLeave上重置计时器。我终于让它工作了，但现在我的点击功能，选择一个特定的图像不再工作后，用户点击一个链接加载一个不同的画廊，共有五个选择。它可以在页面刷新时工作，但一旦选择了一个单独的库并且拇指加载，它就不再工作了。下面是我的幻灯片jQuery代码。我在想，也许我错过了某个地方的代表团，或者我的职能安排不正确

$(document).ready(function(){

var timer = play()

function play() {
    i = setInterval(advanceImage, 4000);
    return i;
}

function pause() {
    clearInterval(timer)
}

var gallery = drawings;



//Creates array variable based on what user clicks
$('.nav li a').click(function() {
    $('#thumbs').children().remove();
    gallery = window[this.id];
    $.each(gallery, function(index, value){
        $('#thumbs').append('<img src="'+value+'" />');
    });
    return;
});

//Adding images to thumbs
$.each(gallery, function(index, value){
    $('#thumbs').append('<img src="'+value+'" />');
});

//Creates a current image from array
function currentImage(){
    i = jQuery.inArray($('#current-img').attr('src'), gallery);
    return i;
}

//Cycles through array
function advanceImage(){
    currentImage();
    if (i < gallery.length - 1){
        changeImage(i + 1);
    }else{
        changeImage(0)
    }
}

//Change current image to whatever i gives it
function changeImage(i){
    $('#current-img').stop().animate({
        opacity: 0,
    }, 200, function(){
        $('#current-img').attr('src', gallery[i]);
        $('#slideshow-container img').load(function(){
            $('#current-img').stop().animate({
                opacity: 1,
            }, 200)
        })
    })
}

//Clicking thumbnail function
$('#thumbs img').click(function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});



//Stop rotation on hover
$('#current-img').mouseenter(function() {
    pause();
})
$('#current-img').mouseleave(resetInterval);
    function resetInterval() {
        timer = play();
    }

---

您正在加载DOM后添加图像。因此，您的单击功能将不会附加到任何图像上，这就是为什么它不起作用的原因。您需要将事件处理程序附加到文档，以便它能够处理加载DOM后创建的图像

更改此项：

//Clicking thumbnail function
$('#thumbs img').click(function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});

为此：

//Clicking thumbnail function
$(document).on('click', '#thumbs img', function(){
    var newImage = $(this).attr('src');
    $.each(gallery, function(index, value){
        if (value == newImage){
            changeImage(index);
        };
    });
    clearInterval();
});

-请注意，在此演示中，您可以通过单击添加的图像来删除它们

---

-请注意，在此演示中，您无法删除添加的图像，因为使用了。请单击而不是.on。

发布html代码并将其放入。