如何从返回动态 html 的 ajax 搜索结果中使 <li> 可点击？

Question

当用户开始在文本字段中输入时，我正在使用 ajax 搜索数据库。结果显示在无序列表中。我希望他们能够单击列表项，并且该项目必须出现在文本框中。我可以进行搜索并显示列表，但是我在单击 li 部分时遇到了困难。

HTML：

<div class="form-group">
  <input type="text" name="name" autocomplete="off" id="name">
  <div class="result"></div>
</div>
<div style="display:none" class="loader">
  <img src="../build/css/ajax-loader.gif" />
</div>

JS：

$(document).ready(function() {
  $("input").keyup(function() {
    $(".loader").show();
    var input = $(this).val();
    if (input.length > 3) {
      $.ajax({
        type: 'POST',
        url: 'insert-ajax.php',
        data: {
          name: input
        },
        success: function(data) {

          if (!data.error) {
            $(".result").html(data);
            $(".loader").hide();
          }
        }

      });
    }

    if (input.length < 1) {
      $(".loader").hide();
      $(".result").html("");
    }
  });

  $(".result li").click(function() {
    alert($(this).data());
  });

});

Answer 1

您需要为此使用event delegation。

由于您的结果是将根据搜索查询添加/删除的动态元素，因此您无法在它们上绑定点击处理程序，而应将其绑定到其父级。

这样做的结果是结果中的 any 元素（因此不仅是<li> 元素）将在单击时触发此回调。这意味着您必须过滤掉不想触发点击的元素。

jQuery 的on 方法提供了一种简洁的方式来进行委托和过滤：

// the callback gets called whenever a `li` element within `.result` is clicked
$(".result").on( "click", "li", function() {
  console.log($(this).text());
});