javascript - jQuery:动态点击事件仅在第二次点击后触发

Question

我创建了一个自定义表单，允许用户按名称查找特定选项，而不是在冗长的列表中搜索它——用于媒体浏览器。代码做了我想要的，但有一个异常(exception)。点击动态添加的建议不会在第一次点击时触发点击事件。

点击屏幕上的任何其他地方似乎可以重置它，然后让我能够点击我的选项并选择它。我不完全确定为什么会发生这种情况，但根据控制台输出，我的代码似乎在能够继续之前卡在了某个地方。

$(document).ready(function() {
  // Custom select form
  $('select.custom_select').each(function(i) {
    var select = $(this);
    var custom_input = select.next().children('input');
    var delete_selection = custom_input.next();
    var suggestion_list = delete_selection.next();

    // Set defaults in the custom form
    var selected = select.find(":selected");
    if (selected.index() != 0) {
      select.val(selected.val()).change();
      custom_input.val(selected.text())
      custom_input.attr('readonly', true);
      delete_selection.addClass('option_selected');
    }

    // User is typing in the custom form
    custom_input.on("change keyup paste", function() {
      suggestion_list.empty();
      console.log('suggestions cleared');
      suggestion_list.css('visibility', 'hidden');
      custom_input.removeClass('no_matches');

      var user_input = custom_input.val();
      if (user_input != '') {

        // Show options to the user
        select.children('option').each(function(i) {
          let option = $(this);
          var text = option.text();
          if (text.toLowerCase().includes(user_input.toLowerCase())) {
            var re = new RegExp('(' + user_input + ')', 'gi');
            suggestion_list.append(`<li data-value="${option.val()}" data-name="${text}">${text.replace(re, '<span>$1</span>')}</li>`);
            console.log('suggestion added');
          }
        });

        if (suggestion_list.children().length == 0) {
          custom_input.addClass('no_matches');
        } else if (!custom_input.attr('readonly')) {
          suggestion_list.css('visibility', 'visible');
          suggestion_list.focus();
        }
      }
    });

    // Choose an option
    suggestion_list.on('click', 'li', function() {
      select.val(parseInt($(this).attr('data-value'))).change();
      custom_input.val($(this).attr('data-name'))
      custom_input.attr('readonly', true);
      delete_selection.addClass('option_selected');
      suggestion_list.css('visibility', 'hidden');
    });

    // Reset the custom form
    delete_selection.on('click', function() {
      select.val('').change();
      custom_input.attr('readonly', false);
      delete_selection.removeClass('option_selected');
      suggestion_list.css('visibility', 'visible');
      custom_input.focus();
    });
  });
});

.delete_selection {
    display: none;
}

.option_selected {
    display: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Type in the input to get suggestions. Click on a list item to select it.</p>
<select class="custom_select" id="id_file" name="file">
    <option value="" selected="selected">---------</option>
    <option value="1">image.svg</option>
    <option value="2">video.mp4</option>
    <option value="3">game.iso</option>
</select>
<div class="custom_select_form">
  <input type="text" spellcheck="false">
  <i class="delete_selection" aria-hidden="true">X</i>
    <ul>
    </ul>
</div>

Answer 1

尝试替换:

custom_input.on("change keyup paste", function() { ... });

只有:

custom_input.on("keyup paste", function() { ... });

说明:绑定(bind) change 也会在您离开过滤器输入时(当焦点不再位于其上时)触发该事件。由于相应的处理程序使用/修改了建议列表，因此您对它们的点击事件可能会受到影响。

另请注意，input propertychange 是建议用于检查实际用户输入的两个事件，而不是 key* 事件。当用户粘贴内容时它也会触发。所以你应该这样做:

custom_input.on('input propertychange', function() { ... });