jQuery事件没有被第二次触发，因为另一个函数

Question

这是我第一篇文章。我是jQuery中的新成员，我正在尝试创建一个Web Gallery。问题在于我在滑块下有一些子弹图像，它们显示当前显示的图像。 这是产生子弹jQuery代码：

function updateProgress() { 
    var txt = ""; 
    for(i=1;i<$slides.length;i++) // Here $slides is a jQuery object; 
    { 
     if(i != currentSlide) 
      txt += '<img src="Images/empty_dot.png" class="dot" data-dot-id="'+i+'" />'; 
     else 
      txt += '<img src="Images/full_dot.png" data-dot-id="'+i+'" />'; 
    } 
    $("#progress").html(txt); 
} 

如果我检查的元素，它看起来像这样：

<div id="progress"> 
    <img src="Images/full_dot.png" class="dot" data-dot-id="1" /> 
    <img src="Images/empty_dot.png" class="dot" data-dot-id="2" /> 
    <img src="Images/empty_dot.png" class="dot" data-dot-id="3" /> 
    <img src="Images/empty_dot.png" class="dot" data-dot-id="4" /> 
</div> 

然后，不会触发回调是这样的：

$(".dot").on("click",gotoImage); 

而且gotoImage功能：

function gotoImage() { 
    var imgId = $(this).attr("data-dot-id"); 
    var go_to = 1000*(imgId-1)*-1; 
    if(imgId == 1) go_to = 0; 
    $slider.css('margin-left',go_to); 
    currentSlide = imgId; 
    updateProgress(); 
    //alert(currentSlide); 
} 

我测试了这个函数，看看哪一行阻止了它被调用，并且我发现它是因为updateProgress（），如前所示。此外，我添加了alert（）以查看该函数何时被调用。

当我的页面被加载时，我调用updateProgress（）一次来显示项目符号。然后，如果我再次调用它，在任何情况下，.on（'click'，function（）{}）事件将不再起作用。因此，为了更简单：我加载页面，加载后调用updateProgress（），然后点击其中一个点（以便再次调用updateProgress（））。发生这种情况后，点击事件将不起作用。

你能解释一下为什么吗？我只是想不通......

这里是整个页面的小提琴：https://jsfiddle.net/antonioo/49gzp3n0/1/

谢谢！

Answer 1

你可能想attach the event on the parent element：

$("#progress").on("click", ".dot", gotoImage); 

这种方式，点击后.on冒泡DOM树添加到#progress元素的元素，并导致gotoImage被调用。

---

概念，而不是重新建立每次HTML目前的有源元件的变化，你可以改变src图像的属性：

function updateProgress() { 
    $('.dot').each(function (index, image) { 
    var dotImage = (index == currentSlide) ? 'full_dot.png' : 'empty_dot.png'; 
    $(image).attr('src', 'Images/' + dotImage); 
    }); 
} 

或者只是改变了圆点src属性这是之前选择和所述一个现在选择图像：

function gotoImage() { 
    var imgId = $(this).attr("data-dot-id"); 
    var go_to = 1000*(imgId-1)*-1; 
    if (imgId == 1) go_to = 0; 
    $slider.css('margin-left', go_to); 
    // lines below changed 
    $('.dot').eq(currentSlide || 0).attr('src', 'Images/empty_dot.png'); 
    currentSlide = imgId; 
    $(this).attr('src', 'Images/full_dot.png'); 
}