jQuery的自动完成动态创建的投入 [英] jQuery autocomplete for dynamically created inputs

问题描述

我在使用jQuery自动完成与动态创建输入的问题（再次使用jQuery创建）。我不能自动完成绑定到新的输入。

I'm having an issue using jQuery autocomplete with dynamically created inputs (again created with jQuery). I can't get autocomplete to bind to the new inputs.

自动完成

      $("#description").autocomplete({
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    });

新表行与输入

var i = 1;
var $table = $("#works");
var $tableBody = $("tbody",$table);

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>');
    $tableBody.append(newtr); 
    i++;
});

我知道，这个问题是由于页面加载后，但我不能想出如何绕过它正在创建的内容。我读过一些相关的问题和遇到jQuery的现场方法，但​​我仍然在一个果酱！

I'm aware that the problem is due to the content being created after the page has been loaded but I can't figure out how to get around it. I've read several related questions and come across the jQuery live method but I'm still in a jam!

任何意见？

推荐答案

首先你要存储 .autocomplete）的选项（这样的：

var autocomp_opt={
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    };

它更整洁使用类属性用于标记输入，如：

<input type="text" class="description" name="item[' + i + '][works_description]" />

最后，当你创建一个新表行适用 .autocomplete（）与已经存储在选项 autocomp_opt ：

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>');
    $('.description', newtr).autocomplete(autocomp_opt);
    $tableBody.append(newtr); 
    i++;
});

这篇关于jQuery的自动完成动态创建的投入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！