Jquery动态按钮调用HTML表单操作

Question

我有以下HTML代码，允许我在单击按钮删除时删除产品。

<table class="cart-table">
    <tbody class="cart-body">
        <form method="POST" class='form-product-ajax' action='{% url "shopping-cart-remove" %}' data-endpoint='{% url "shopping-cart-remove" %}'>
            {% csrf_token %} {% for item in cart.items %}
            <tr class=cart-product>
                <td>{{ item.quantity}} x {{ item.product.name }} {{ item.subtotal }}
                    <input type="hidden" name='id' value='{{ item.product.id }}'>
                    <button class='remove-btn'>remove</button>
                </td>
                {% endfor %}
            </tr>
        </form>
    </tbody>
    <tr class="cart-total-sec">
        <td class="cart-price">{{ cart.total }}</td>
    </tr>
</table>

我想使用Jquery / Ajax来解决这个问题，目前仍然坚持以下几点。我可以动态创建一个删除按钮，然后我分配一个＆＃39; remove-btn＆＃39;对它，但我仍然无法删除产品。如何编写Jquery代码，以便单击动态生成的按钮执行HTML表单操作中指定的操作？

                 $.each(data.products, function(index, value) {
                     console.log(value)
                     console.log(data.count)
                     var removeSpan = thisForm.find(".remove-btn")
                     cartBody.append("<tr><td>" + value.quantity + " x" + "</td><td>"+ value.name + "</td><td>" + "£" + value.price + "</td>" + "<td><button type='submit' class='remove-btn'>Remove</button></td></tr>")