Question

这是我在这里的第一篇文章。我是jQuery的新手，我正在尝试创建一个Web画廊。问题是我在滑块下面有一些子弹图像，显示当前显示的图像。这是生成项目符号的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。

从概念上讲，每次当前活动元素更改时，您都可以只更改图像的src属性，而不是重新构建HTML：

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事件

1 个答案: