如何添加jQuery用户界面自动完成一个动态创建的元素？ [英] How can I add jquery ui autocomplete to a dynamically created element?

问题描述

我试图让jQueryUI的自动完成触发动态创建的表单输入元素，但它不工作。我已经使用keyup.autocomplete和keydown.autocomplete在$ .live（）绑定的事件试过，但它绑定到新元素 - 只有那些已经在页面上

尝试一下code 这里（尝试在第一个输入输入AVA，然后点击添加输入并输入新的输入相同）。

JavaScript的：

  $（函数（）{
    $（＃输入Add按钮）。点击（函数（）{
        $（input.searchInput：最后一个）的克隆（真）.appendTo（$（本）.closest（形式））;
        $（input.searchInput：最后一个）VAL（）;    }）    $（input.searchInput）。生活（keydown.autocomplete功能（）{
        $（本）.autocomplete（{
            资源： [
                动作，
                AppleScript的
                ASP
                BASIC，
                C，
                C ++，
                Clojure的
                COBOL
                ColdFusion的
                二郎
                FORTRAN，
                常规
                哈斯克尔
                Java的，
                JavaScript的
                Lisp的，
                Perl的
                PHP
                蟒蛇，
                红宝石，
                斯卡拉
                方案
                ]            的minLength：2
        }）;
    }）
}）;
 

HTML

 ＆LT;形式NAME =myForm会的方法=后＆GT;
    ＆LT;输入ID =Add按钮NAME =Add按钮类型=按钮值=添加输入/＆GT;
    ＆LT;输入名称=搜索VALUE =级=searchInputMAXLENGTH =20/＆GT;
＆LT; /表及GT;
 

解决方案

功能.live（）现在pcated德$ P $。

看起来像code是这样工作的：

  VAR选项= {
    来源：动作，AppleScript的]，
    的minLength：2
};
VAR选择='input.searchInput';
$（文件）。在（'keydown.autocomplete'，选择器功能（）{
    $（本）.autocomplete（选件）;
}）;
 

I'm trying to get jQueryUI AutoComplete to trigger on dynamically created form input elements, but it's not working. I've tried using keyup.autocomplete and keydown.autocomplete as bind events in $.live(), but it's binding to the new elements - only those already on the page.

Try out the code here (try typing "ava" in the first input, then click "Add an Input" and type the same in the new input).

JavaScript:

$(function() {
    $("input#addButton").click(function() {
        $("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
        $("input.searchInput:last").val("");

    })

    $("input.searchInput").live("keydown.autocomplete", function() {
        $(this).autocomplete({
            source: [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
                ],

            minLength: 2
        });
    })
});

HTML:

<form name="myForm" method="post">
    <input id="addButton" name="addButton" type="button" value="Add an input" />
    <input name="search" value="" class="searchInput" maxlength="20" />
</form>

解决方案

Function .live() is deprecated now.

Looks like code like this works:

var options = {
    source: ["ActionScript", "AppleScript"],
    minLength: 2
};
var selector = 'input.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
    $(this).autocomplete(options);
});

这篇关于如何添加jQuery用户界面自动完成一个动态创建的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！