Как я могу отправить <li>с формой внутри?

Question

Я использую AJAX ответ от database для создания списка товаров для аккордеона.

Ответ анализируется, и набор элементов списка, аналогичный приведенному ниже, присваивается переменной, называемой «products», и добавляется в div внутри тега аккордеонов с помощью $("#my_div").append(products).

В моей форме все работает безупречно, за исключением важного исключения, которое отправляет, но AJAX никогда не срабатывает. Есть идеи?

$('.form').on('submit', function(e) {
    e.preventDefault();
    var sku = $("#sku").val();
    var product = $("#prod_01").val();
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: ajaxurl,
    nonce: nonce,
    data: {
        action: 'doSomething',
        sku: sku,
        product: product,
        }
     }).done(function(response) {
        // process my response 
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="accordion-item">
   <h3 class="accordion-thumb">Option1</h3>
   <div id="id_01" class="item">
      <form id="Form_01" class="form" method="post">
        <h3>Blue Car</h3>
        <input id="sku" name="sku" type="hidden" value="1001">
        <input id="prod_01" name="prod_01" type="hidden" value="blue car">
        </div>
        <button id="Btn_01" type="submit" class="">Select This product</button>
      </form>
   </div>
</li>

Answer 1

Пожалуйста, проверьте мой фрагмент, похоже, он работает нормально. Я отправляю запрос на фиктивную страницу, которая просто возвращает мои запрошенные параметры. Ваша структура htlm включает закрывающий тег div, который находится не в том месте. Я не могу помочь вам с nonce, возможно, есть недостаток.

$('.form').on('submit', function(e) {
    e.preventDefault();
    var sku = $("#sku").val();
    var product = $("#prod_01").val();
    console.log(sku);
    console.log(product);
    $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://httpbin.org/post',
    data: {
        action: 'doSomething',
        sku: sku,
        product: product,
        }
     }).done(function(response) {
        console.log(response);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="accordion-item">
   <h3 class="accordion-thumb">Option1</h3>
   <div id="id_01" class="item">
      <form id="Form_01" class="form" method="post">
        <h3>Blue Car</h3>
        <input id="sku" name="sku" type="hidden" value="1001">
        <input id="prod_01" name="prod_01" type="hidden" value="blue car">
        <button id="Btn_01" type="submit" class="">Select This product</button>
      </form>
   </div>
</li>

Answer 2

Для любознательных! Я решил проблему. Это было связано с тем, как все это отображалось в DOM. Я закончил тем, что изменил мою форму отправки, чтобы компенсировать. Я изменил его с $('.form').on('submit', function(e) на $(document).on('submit', '.form', function(e), и это решило проблему.