Question

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

为什么这段代码会多次向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按钮上添加一个监听器，这意味着如果您选择了Add Filter Location点击了3次，监听器被调用3次，你的列表中有3个条目。

此代码：

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

应该在您的点击回调之外（对于ServiceFilter也是如此）。

Answer 2

那是因为每次点击click按钮时你都会重新附加AddFilter处理程序，所以第二次它会运行两次。

请改为尝试：

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

并且

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

请参阅one()和Fiddle

Answer 3

每次点击click()时，您都会向其中一个.addFilter按钮添加新的#addFilter处理程序。它们都调用相同的函数，添加一个条目然后清除字段值。然后运行处理程序的下一个“副本”，添加这些空值。

设置处理程序一次：

$('#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>

为什么<li>多次添加？</li>

3 个答案: