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

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为此。

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

这样做的结果是，结果中的任何元素(因此不仅仅是 <li> 元素)在单击时都会触发此回调。这意味着您必须过滤掉不想触发点击的元素。

jQuery 的 on 方法提供了一种简洁的方法来进行委托(delegate)和过滤:

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