Javascript JQuery-事件委派系列中只有最后一个事件处理程序触发器？

我一直在尝试从头开始构建一个图像滑块，它会自动滑动，但当单击底部相应的点时，会转到某个幻灯片

当我分别隔离和测试我的每个事件委派单击功能时，它们非常适合让不同的照片前后滑动。但当所有函数都在一起时，只有第三个函数起作用。你能帮忙吗

为了演示，我制作了一个包含以下JavaScript/jQuery的脚本：

'use strict';

$(document).ready(function () {

//DOM cache 
var $slider = $('section');
var $slideContainer = $slider.find('ul');
var $windowWidth = $slider.css('width');
var $windowWidthUnitless = $slider.width();
var $dot1 = $slider.find('#dot-1');
var $dot2 = $slider.find('#dot-2');
var $dot3 = $slider.find('#dot-3');

//config
var width = $windowWidth;
var doubleWidth = $windowWidthUnitless * 2;

$($slider).on('click',$dot1,function() {
    $slideContainer.css('margin-left', 0);
    $dot1.addClass('filled');
    $dot2.removeClass('filled');
    $dot3.removeClass('filled');
})

$($slider).on('click',$dot2,function() {
    $slideContainer.css('margin-left', '-' +width);
    $dot1.removeClass('filled');
    $dot2.addClass('filled');
    $dot3.removeClass('filled');
})

$($slider).on('click',$dot3,function() {
    $slideContainer.css('margin-left', "-" +doubleWidth +"px");
    $dot1.removeClass('filled');
    $dot2.removeClass('filled');
    $dot3.addClass('filled');
})

});

在此html上执行操作：

<section>
<ul>
    <li>
        <div id="slide-1"></div>
    </li>
    <li>
        <div id="slide-2"></div>
    </li>
    <li>
        <div id="slide-3"></div>
    </li>
    <li>
        <div id="slide-1"></div>
    </li>
</ul>
<div class="selected" id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>

（如果这有帮助，这里有一个版本的my slider，它实际上也会自动滑动，当点被单击时，它会停止并转到某个幻灯片。同样，它只转到最后一个幻灯片。）

在每个

$（$slider）.on（'click'，$dotNumber，function（）{…}

行，将$dotNumber替换为

“#点编号”

示例：

$（$slider）.on（'click'，'#dot-1'，function（）{…}

我不知道是否有一种特殊的方法可以传递jQuery对象来指定目标的子元素，但我知道添加CSS选择器作为第二个参数就可以了

* {
margin: 0;
padding: 0;
} /* just my default */

section {
overflow: hidden;
width:400px;
height:400px;
}

section ul {
width:1600px;
}

section li {
list-style-type: none;
display: inline;
float: left;
}

[id*="slide-"] {
height: 400px;
width: 400px;
}

[id*="dot-"] {
float:left;
height: 40px;
width: 40px;
border-radius: 20px;
position: relative;
bottom: 45px;
}