jQuery序列化不适用于动态元素

Question

I'm using the jQuery .serialize function and can't get it to serialize the this particular dyamic elements form on submit. Note that I've tried the form on static and dynamic code and it worked fine. But I can't find the bug in this code

Here's my form code

<%= form_tag({action: :show}, method: "post", id: "ajax-show") do %>
            <select id="xtime">
              <% (0..95).each do |min| %>
                  <option><%= Time.at(min*15*60).utc.strftime("%H:%M") %></option>
              <% end %>
            </select>
            <input id="xprice" value="12"/>
            <a href="#" id="price-add">add</a>

            <ul id="price-list">

            </ul>
            <hr/>
            <%= submit_tag("Submit") %>
        <% end %>

and here's my jQuery code

    $("form#ajax-show").on('submit', function (e) {
        'use strict';
        e.preventDefault();
        console.debug($(this).serializeJSON());
    });
    $(document).on('click', '#price-add', function (e) {
        e.preventDefault();
        var t = '<input enabled checked type="checkbox" name="times[]" value="' + $('#xtime').val() + '"/>' + $('#xtime').val();
        var p = '<input enabled checked type="checkbox" name="prices[]" value="' + $('#xprice').val() + '"/>' + $('#xprice').val();
        $('#price-list').append('<li>time:  ' + t + '  .  price: ' + p + '  .  <a href="#" id="price-remove">remove</a></li>')
    });
    $(document).on('click', '#price-remove', function (e) {
        e.preventDefault();
        $(this).parent('li').remove();
    });

Answer 1

If I understood you correctly, this should help you:

$("form#ajax-show").on('submit', function (e) {
  'use strict';
  e.preventDefault();
  var formEmulation = $("<form/>").append($("#price-list"));
  console.log(JSON.stringify(formEmulation.serializeArray()));
});