autouzupełnianie jQuery dla dynamicznie tworzonych wejść

Question

autouzupełnianie jQuery dla dynamicznie tworzonych wejść

Mam problem z autouzupełnianiem jQuery z dynamicznie tworzonymi wejściami (ponownie utworzonymi za pomocą jQuery). Nie mogę uzyskać autouzupełniania, aby powiązać z nowymi wejściami.

Autouzupełnianie

      $("#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,
    });

nowy wiersz tabeli z wejściami

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++;
});

Zdaję sobie sprawę, że problem wynika z treści tworzonej po załadowaniu strony, ale nie wiem, jak to obejść. Przeczytałem kilka powiązanych pytań i natknąłem się na metodę jQuery live, ale Wciąż jestem w tarapatach!

Jakieś rady?

12

jquery dynamic append input jquery-autocomplete

Author: Jamatu, 2010-04-18

Source

2 answers

Stwierdziłem, że muszę wstawić autouzupełnianie po dodaniu tak:

 $tableBody.append(newtr);  
 $('.description', newtr).autocomplete(autocomp_opt);

0

Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-17 15:48:58

score 24 · Accepted Answer

Najpierw należy zapisać opcje dla .autocomplete() Jak:

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,
    };

Lepiej jest użyć atrybutu class do oznaczania input, np.:

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

Ostatni, podczas tworzenia nowego wiersza tabeli Zastosuj {[3] } z opcjami już zapisanymi w 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++;
});