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

Question

这是我第一次 post 来这里。我是 jQuery 的新人，我正在尝试制作一个网络画廊。问题出在滑块下方的一些项目符号图像上，它们显示当前显示的图像。这是生成项目符号的 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()）。发生这种情况后，点击事件将不起作用。

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

这是整个页面的fiddle：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');
}

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

jQuery event not being triggered the second time because of another function

html

javascript

css

jquery

image-gallery