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。

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

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

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

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

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

1 个答案: