dynamically inserted form inputs aren't posted

Question

I don't usually actually ask for help, but when I do, believe me I did my research well and found nothing.

Lets make it simple, but relevant.I have a form. Part of it goes like this:

<div class="list-model">
    <div class="connected"><?=$items['connected']?></div>
    <div class="items"><?=$items['items']?></div>
</div>

When somebody clicks an input, i want to move it to another div. I use jQuery for that:

$(".list-model").delegate(".item input", "change", function()
{
    listModel = $(this).closest(".list-model");
    item = $(this).closest(".item");
    insertTo = $(this).is(":checked") ? "connected" : "items";
    insertTo = listModel.find("."+insertTo);
    $(insertTo).append(item);
});

The jQuery works like magic, .item moves back and forth.

BUT

Once I "touch" the actual input, it won't POST!

It won't show in Chrome's Developer Tools under Form Data, nor on the server side.

Answer 1

Well... Of course it was my bad.

I'm using an ultra-old framework, in which the form element is "stuck" inside a table element, after <table> but before <tr>.

I took the <form> outside the <table>, so the <form> would wrap the <table> properly, and it worked just fine.