jQuery更改表单ID并提交"new"的形式

Question

我有一个表单的ID为"addCat" ..我使用jquery将ID更改为"editCat"，并使用预先存在的数据填充表单输入，然后提交新表单。

显然新ID已更新，但表单未提交?

$("#addTags").on("submit",function(){
    var dataString = $(this).serialize();;
    $.post("./Scripts/adminDoAddCat.php", dataString, function (data) {
        if (data == "1") {
        $('div.add_result').html("<h3>New Category Added Successfully</h3>").fadeIn(800);
        }
        if (data == "0") {
        alert("Something went wrong");
        }
    });
    return false;
});
$("tbody tr td a.fa-pencil-square").on("click",function(){
    $("form#addTags").attr('id','editTags');
    alert($('form').attr('id')); //this is the way i make sure ID is updated 
});
    $("#editTags").on("submit",function(){
    var dataString = $(this).serialize();;
    alert(dataString); //making form is recognized but it's not working
    return false;
});

Answer 1

使用.prop()代替.attr()更改ID

$("form#addTags").prop('id','editTags');

然后使用事件委托绑定提交处理程序

$(document).on("submit","#editTags",function(){
    var dataString = $(this).serialize();;
    alert(dataString); 
    return false;
});

Answer 2

有一个解决方法。但这可能不是你想要的。不管怎样，看看演示。如果对你有用，请告诉我。但这不是一个好方法。

$("tbody tr td a.fa-pencil-square").on("click",function(){
    $("form#addTags").prop('id','editTags');
    //Define the handler inside of the new 
   $("#editTags").on("submit",function(){
    var dataString = $(this).serialize();;
    alert(dataString); //making form is recognized but it's not working
    return false;
   });
});