私はアヤックスにリンクオプションのデータリストをクリックすると追記AJAXでのクリックオプションならば、私がリンクしたい

Question

を追加リダイレクトします：

もっと詳しく：

$('#input-friends').on('input', function() { 
    var id = $('#input-friends').val(); 
    $.ajax({ 
     url : "<?= $base_url ?>/api/api.php", 
     type: "POST", 
     data: {id:id}, 
     success: function(data) { 
      console.log(data); 
      $("#friends").html("<option value='AA' onclick='test()'>item Appended</option>"); 
     } 
    }) 
}); 

<datalist id="friends"></datalist> 

機能テスト（）、またはリンクAPPENDで動作しません:(

Answer 1

この

$('#input-friends').on('input', function() { 
    var id = $('#input-friends').val(); 
    $.ajax({ 
     url : "<?= $base_url ?>/api/api.php", 
     type: "POST", 
     data: {id:id}, 
     success: function(data) { 
      var opt = $('<option>'); 
      opt.val("AA"); 
      opt.html("Item Appended"); 
      opt.click(function(){ 
       console.log("clicked!"); 
       test(); 
      }); 

      $("#friends").html(opt); 
     } 
    }) 
}); 

<datalist id="friends"></datalist> 

を試すか、このソリューションの種類を確認することができます。Event binding on dynamically created elements?

Answer 2

あなたは、HTMLのヘッダに（ '入力' に関する

<script> 
    function test(){ 
    window.location.href = 'http://www.google.com'; 
    } 
    </script> 

Answer 3

$（ '＃入力-友人'）。このコードを貼り付けテスト

の名前の関数を作成することができ、 var id = $（ '＃input-friends'）。val（）; function（）{
var id = $
$アヤックス（{
URL： "/api/api.php"
タイプ： "POST"、
データ：{ID：ID}、
成功：関数（データ）{
コンソール.logの（データ）;
$（ "＃の友人"）HTML（ "項目を付加"）;。
}
}）
}）;
<input list="friends" name="friends"> <datalist id="friends"></datalist>