如何让li可以从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这一点。

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

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

jQuery的on方法提供了一个简洁的方式来做到既代表团和过滤：

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