如果我点击ajax附加链接选项datalist，我想要重定向

Question

如果在附加ajax中单击选项，我想链接：

更多详情 ：

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

功能测试（）或链接无法附加:(

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

您可以创建一个名为test的函数

将此代码粘贴到html的标题中

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

Answer 3

$（'#input-friends'）。on（'input'，function（）{ var id = $（'＃input-friends'）。val（）; $就（{ url：“/ api / api.php”， 类型：“POST”， data：{id：id}， 成功：函数（数据）{ 的console.log（数据）; $（“＃friends”）。html（“item Appended”）; } }） }）;

<input list="friends" name="friends">
<datalist id="friends"></datalist>