為什么這樣呢 <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

每次單擊“ Add Filter按鈕時，都會向“ Add按鈕添加一個偵聽器，這意味着如果在“選擇Location Add Filter上單擊3次，則會調用該偵聽器3次，並在列表中獲得3個條目。

這段代碼：

$('#LocationFilter').find('.addFilter').click(function() {
    $(this).parent().hide();
    AddLocationFilter();
});

應該在您的點擊回調之外（對於ServiceFilter也是如此）。

Answer 2

那是因為每次點擊AddFilter按鈕時你都會重新附加click處理程序，所以第二次它會運行兩次。

試試這個：

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

和

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

看一個（）和小提琴

Answer 3

每次單擊#addFilter您都會向其中一個.addFilter按鈕添加一個新的click()處理程序。 它們都調用相同的函數，添加一個條目然后清除字段值。 然后運行處理程序的下一個“副本”，添加這些空值。

設置處理程序一次：

 $('#addFilter').click(function() { var filter = $('#FilterTypes').val(); switch (filter) { case "Location": $('#LocationFilter').show(); break; case "Service": $('#ServiceFilter').show(); break; } }); $('#LocationFilter .addFilter'). click(function() { $(this).parent().hide(); AddLocationFilter(); }); $('#ServiceFilter .addFilter'). click(function() { $(this).parent().hide(); AddServiceFilter(); }); 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(''); }; 

 #LocationFilter, #ServiceFilter { display: none; } div, ul, select { margin: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="FilterTypes"> <option value="Location">Location</option> <option value="Service">Service</option> </select> <a href="#" id="addFilter">Add filter</a> <div id="LocationFilter"> <h4>Add Location Filter</h4> <input id="City" placeholder="City" /> <input id="State" placeholder="State" /> <input type="button" class="addFilter" value="Add"> </div> <div id="ServiceFilter"> <h4>Add Service Filter</h4> <input id="Name" placeholder="Service name" /> <input type="button" class="addFilter" value="Add"> </div> <ul id="Filters"></ul>