Динамическое добавление строки таблицы с помощью jquery, а затем добавление поля автозаполнения в каждой новой строке

Question

Эй, ребята, я пытался спросить об этом вчера, но я не объяснил себя достаточно ясно или просто.

У меня есть форма, настроенная в таблице. Пользователь может добавлять новые строки (и больше элементов формы) по своему усмотрению. Каждая строка этой формы должна иметь свое отдельное поле выбора и соответствующее поле выбора подкатегории.

Так что в основном ...

Имя | Выберите
хххххх | [выбор категории] [выбор подкатегории]
хххххх | [выбор категории] [выбор подкатегории]
хххххх | [выбор категории] [выбор подкатегории]

Вы поняли идею. :)

В настоящее время все добавленные строки имеют неработающую версию автоматического заполнения.

Какие-нибудь предложения относительно того, как заставить это работать?

Вот автозаполнение кода и добавление кода строки таблицы, который я использую, если это помогает взломать чей-то мозг. Я с радостью откажусь от всего, если у кого-то есть ответ, который, по его мнению, будет лучше.

Бесплатный файл cookie для решения, в котором я могу добавлять / удалять строки формы. :)

// auto populate select code

 $(document).ready(function(){
            $("#selectionresult").hide();

            $("#selection").change( function() {
                $("#selectionresult").hide();
                $("#result").html("Retrieving ...");
                $.ajax({
                    type: "POST",
                    data: "data=" + $(this).val(),
                    url: "include/javascript_population.php",
                    success: function(msg){
                        if (msg != ""){
                            $("#selectionresult").html(msg).show();
                            $("#result").html("");
                        }
                        else{
                            $("#result").html("<em>No item result</em>");
                        }
                    }
                });
            });
        });


// add table row code

  $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');

          return false;
        });
    });

    $("#mytable tbody>tr:last").each(function() {this.reset();});     

Любая помощь будет всем признательна. Заранее спасибо. :)

Answer 1

У вас могут быть проблемы с конфликтом идентификаторов и привязкой событий.Попробуйте использовать live ();

Ваши события становятся несвязанными, когда вы клонируете и перемещаете элементы DOM.

Попробуйте это:

$("#add").live("click", function() {
$("#selection").live("change", function() {

Также похоже, что выдублировать идентификаторы.Проверьте и убедитесь, что #selection, #selectionresult и т. Д. Не клонируются.