Forms jQuery on（“submit”）不绑定到使用ajax加载的元素，因为它位于另一个表单中

我有一张物品表

每行的第一列包含作为表单一部分输入的复选框。 用户可以单击这些复选框，然后单击提交以执行批量操作，例如删除项目

我已经设置了（使用jquery）一种情况，即单击行-列中的“添加数据”链接时，将不同的表单加载到第三列中，用户可以在其中输入项目数据

然后我想做的是使用ajax提交第二个表单。为此，我使用以下代码：

$(document).on('submit',".add_form",function(event)
{

    event.preventDefault();

    var serial=$(this).serialize();

    var domain=$('[name=domain]').val();


       $.ajax({
     url:"portfolio/transactions/"+domain+"/",
     type:"post",
     data: {data:serial},
     success: function(dat){
$('#transactions_div').html(dat);
     }
   });




});

然而，这是行不通的，我相信这是因为html不允许表单中包含表单。我的假设是jQuery遵循这样的标准，当第二个表单加载到包含在另一组标记中的div中时，jQuery会感到困惑

鉴于此，我想做的是不可能的吗

谢谢

试试这个：

$(document).on('submit', ".add_form", function (event) {

    event.preventDefault();
    var serial = $(this).serializeArray();
    var domain = $('[name=domain]').val();

    $.ajax({
        url: "portfolio/transactions/" + domain + "/",
        type: "POST",
        data: serial,
        success: function (data) {
            $('#transactions_div').html(data);
        }
    });
});

HTML

---

您可能需要将提交按钮替换为常规按钮，因为现在两个表单都是在内部表单上触发本机提交功能时提交的，同时提交外部表单，这是不可阻止的。iirc，HTML5允许嵌套表单，但是您必须记住，除非您阻止，否则内部表单的提交事件可能会冒泡到外部表单。在添加新元素后绑定事件，并且在从提交按钮提交内部表单时，按照

$（“rand form id”）.submit（）；'

或

$（this.parent（）.submit（）只是一些想法问题是在内部表单上从未检测到“提交”事件，我认为这是因为无效的html？h4cky-为什么要在之后绑定它们而不是在上使用？这里唯一的变化似乎是serializeArray的用户。。问题是提交时根本没有调用该函数。。不是其中包含的内容。这是可行的，但HTML无效。此外，仅仅因为html无效而不得不使用“单击提交”按钮而不是“提交”，这似乎有点不太妥当。这只是一个示例html代码。它缺少一些属性。是的，我知道：）我的意思是，将一个表单嵌入另一个表单是一个问题-它是无效的。也就是说，这并没有回答如何在没有无效html的情况下实现上述输出的问题。。
<form class="add_form">
    <form class="secondForm">
        <input type="checkbox" />
    </form>
    <input name="domain" type="text" />
    <!-- Replace the submit-Button with a normal button -->        
    <input type="button" value="Send" id="send"/>
</form>

$(document).on('click', "#send", function () {

    var serial = $(".add_form").serialize();
    var domain = $('[name=domain]').val();

    $.ajax({
        url: "portfolio/transactions/" + domain + "/",
        type: "post",
        data: serial, // serial instead of {data : serial}
        success: function (dat) {
            $('#transactions_div').html(dat);
        }
    });
});