在页面准备好后生成输入时使用 jquery 和 ajax 自动完成

Question

我在论坛上搜索了这个，我发现了这个：autocomplete not working with ajax generated textbox 和这个：jQuery autocomplete failing after dynamically adding additional text input field

但每次，它都是文档就绪功能，而我的功能是在 keyup 上。我认为这很重要。

情况如下：我有这些函数来处理自动完成输入。它使用 jQuery 和 Ajax：

var truid = "";

$(function(){
    $(".autocomp").keyup(function() {
        var realid = $(this).attr('id');
        var searchid = $(this).val();
        var dataString = 'search=' + searchid;

        if(searchid != '') {
            $.ajax({
                type: "POST",
                url: "ajax_complete.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#result_"+realid).html(html).show();
                    truid=realid;
                }
            });
        }
        return false;    
    });

    $(".autoresult").on("click",function(e) {
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var $id = $clicked.find('.auto_id').text();
        var decoded = $("<div/>").html($name).text();
        $('#' + truid).val(decoded);
        $('#' + truid + "_true").val($id);
    });

    $(document).on("click", function(e) { 
        var $clicked = $(e.target);
        if (! $clicked.hasClass("autocomp")) {
            $("#result_" + truid).fadeOut(); 
        }
    });

    $('.autocomp').click(function() {
        truid = $(this).attr('id');
        $("#result_" + truid).fadeIn();
    });
});

我通常将此输入用于此自动完成功能：

<input type="text" class="autocomp" id="uniqueid" />
<input type="hidden" id="uniqueid_true" name="uniqueid" />
<div class="autoresult" id="result_uniqueid"></div>

当我在文档准备好时将这段代码直接放在 html 中时，它可以正常工作。

但是当我在 ajax 中生成这些输入时，自动完成功能不起作用，当我提出建议时没有任何反应。

我如何让它工作？

Answer 1

对 keyup-function 执行与 click-functions 相同的操作：

而不是...：

$(".autocomp").keyup(function() { [...] });

写...：

$(".autocomp").on("keyup", function() { [...] });