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を使用する必要があります。

結果が検索クエリに基づいて追加/削除される動的要素なので、クリックハンドラをバインドすることはできず、その代わりに親にバインドする必要があります。

結果内の任意の要素（したがって、<li>要素だけでなく）がクリックされたときにこのコールバックをトリガーします。つまり、クリックをトリガーしたくない要素を除外する必要があります。

jQueryのon方法が代表団とフィルタリングの両方を行うための簡潔な方法を提供しています：彼はすでに行っている

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