I want redirect if I click link option datalist on ajax append

Question

I want to link if click option in append ajax :

More detail :

$('#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>

Function test() or link not working in append :(

Answer 1

try this

$('#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>

or you can check this kind of solution: Event binding on dynamically created elements?

Answer 2

you can create a function with the name of test

paste this code in the header of html

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

Answer 3

$('#input-friends').on('input', function () {
var id = $('#input-friends').val();
$.ajax({
url : "/api/api.php",
type: "POST",
data: {id:id},
success: function(data) {
console.log(data);
$("#friends").html("item Appended");
}
})
});
<input list="friends" name="friends"> <datalist id="friends"></datalist>