javascript - 为什么这个 <li> 被多次添加？

Question

http://jsfiddle.net/ay9d8cuq/3/

要重新创建，请尝试多次添加位置/服务过滤器。请注意它是如何将空项目添加到列表中的。

为什么这段代码不止一次地向 DOM 添加过滤器？

$('#addFilter').click(function(){
    var filter = $('#FilterTypes').val();

    switch (filter)
    {
        case "Location":
                $('#LocationFilter').show()
                .find('.addFilter').click(function() {
                    $(this).parent().hide();
                    AddLocationFilter();
                });
                break;
            case "Service":
                $('#ServiceFilter').show()
                .find('.addFilter').click(function() {
                    $(this).parent().hide();
                    AddServiceFilter();
                });
                break;
    }
});

var AddLocationFilter = function() {
    $('#Filters').append('<li>' + $('#City').val() + ', ' + $('#State').val() + '</li>');
    $('#City').val('');
    $('#State').val('');
};

var AddServiceFilter = function() {
    $('#Filters').append('<li>' + $('#Name').val() + '</li>');
    $('#Name').val('');
};

Answer 1

那是因为每次单击 AddFilter 按钮时，您都会重新附加 click 处理程序，因此第二次它将运行两次。

试试这个:

.find('.addFilter').one('click', function() {

和

.find('.addFilter').one('click', function() {

参见 one()和 Fiddle