问JQuery -仅在事件委托系列中的最后一个事件处理程序触发器？

EN

'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');
})

});

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

* {
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;
}