创建Javascript表单后Ajax不工作

我已经使用

Javascript

动态创建了一个表单，当我单击一个按钮时，我想用

JQuery

和

Ajax

处理提交事件，但它不起作用，它将我重定向到操作字段中的url（顺便说一句，是空白页），并且不会触发

JQuery

事件。尝试了一些我找到的解决方案，但仍然不起作用

JS表单

$("#createForm").on("click", function (e) {

    var div = document.getElementById('createTopic');
    var form = document.createElement('form');
    form.setAttribute('id', 'topicForm');
    form.setAttribute('action', "/post/" + postId + "/topic/create");
    form.setAttribute('method', 'POST');

    var csrf = document.createElement('input');
    csrf.setAttribute("type","hidden");
    csrf.setAttribute("name","_token");
    csrf.setAttribute("value",csrf_token);

    var input1 = document.createElement('input');
    input1.setAttribute('type', 'text');
    input1.setAttribute('placeholder', 'Name');
    input1.setAttribute('name', 'topicName');

    var input2 = document.createElement('input');
    input2.setAttribute('type', 'text');
    input2.setAttribute('placeholder', 'Color');
    input2.setAttribute('name', 'topicColor');


    var submit = document.createElement('input');
    submit.setAttribute('type', 'submit');
    submit.setAttribute("value", "Crear");
    submit.setAttribute('id', 'createTopic');

    form.appendChild(csrf);
    form.appendChild(input1);
    form.appendChild(input2);
    form.appendChild(submit);

    div.appendChild(form)
});

Ajax

$("#topicForm").on("submit", function (e) {

    e.preventDefault();
    var form = $(this);

    $.ajax({
        url: form.attr('action'),
        type: "post",
        data: form.serialize(),
        headers: {'X-CSRF-Token': csrf_token},
        success: function (response) {
            console.log("SUCCESS: " + response);
        },
        error: function (jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            console.log("ERROR: " + msg);
        },
    });
});

HTML

<div style="float: right;width:150px;">
   <button id=createForm class="btn btn-warning btn-sm"> Add topic <i class="fa fa-plus"></i></button>
</div>

<div id="createTopic" style="float: right;width:150px;"></div>

添加主题

是否尝试在div.appendChild（表单）下面添加此函数；在工作中，我有一个固定的想法，那就是将两个功能分开，这是一个错误。谢谢

    $("#createForm").on("click", function (e) {

    var div = document.getElementById('createTopic');
    var form = document.createElement('form');
    form.setAttribute('id', 'topicForm');
    form.setAttribute('action', "/post/" + postId + "/topic/create");
    form.setAttribute('method', 'POST');

    var csrf = document.createElement('input');
    csrf.setAttribute("type","hidden");
    csrf.setAttribute("name","_token");
    csrf.setAttribute("value",csrf_token);

    var input1 = document.createElement('input');
    input1.setAttribute('type', 'text');
    input1.setAttribute('placeholder', 'Name');
    input1.setAttribute('name', 'topicName');

    var input2 = document.createElement('input');
    input2.setAttribute('type', 'text');
    input2.setAttribute('placeholder', 'Color');
    input2.setAttribute('name', 'topicColor');


    var submit = document.createElement('input');
    submit.setAttribute('type', 'submit');
    submit.setAttribute("value", "Crear");
    submit.setAttribute('id', 'createTopic');

    form.appendChild(csrf);
    form.appendChild(input1);
    form.appendChild(input2);
    form.appendChild(submit);

    div.appendChild(form)

    $("#topicForm").on("submit", function (e) {

    e.preventDefault();
    var form = $(this);

    $.ajax({
        url: form.attr('action'),
        type: "post",
        data: form.serialize(),
        headers: {'X-CSRF-Token': csrf_token},
        success: function (response) {
            console.log("SUCCESS: " + response);
        },
        error: function (jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            console.log("ERROR: " + msg);
        },
    });
});

});