Question

我有一个用JavaScript生成的Form，然后插入一个弹出的Modal窗口。

我的表单HTML不会生成或插入页面，直到DOM生成整个页面之后（它是从Socket post事件触发，然后弹出我的弹出窗口并插入此表单的HTML）

页面中还可以插入多个表单，而不仅仅是1。

以下是生成并插入页面的表单代码示例...

<form action="/" id="logCallForm" class="logCallForm">
    <div class="col-xs-10">
        <input class="form-control input-sm" type="text" name="subject" placeholder="Subject">
        <br><input type="hidden" name="qmsId" value="1c885762-27d5-58ef-9f95-527ae750c9be">
        <input type="hidden" name="dateTime" value="2013-11-07 01:05:19">
    </div>
    <input type="submit" value="Save Call">
</form>

现在下面是一些已经在同一页面上运行的JavaScript，我的目标是能够使用AJAX发布这些表单。现在它似乎没有检测到代码，因为当我点击提交按钮时，它会加载一个新页面而不是尝试通过AJAX提交。

请帮帮我？我很确定它与已经加载页面后添加的表单有关吗？

$(function () {

    $('.logCallForm').on('submit', function (e) {

        var url = '/custom/modules/nam_call_logger/call_server.php';

        $.ajax({
               type: "POST",
               url: url,
               data: $(this).serialize(), // serializes the form's elements.
               // qmsId dateTime subject
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
        });
        e.preventDefault();

    });

});

Answer 1

尝试以生动的方式订阅：

$(document).on('submit', '.logCallForm', function (e) {

基本上，这将订阅与选择器匹配的元素的submit事件，即使在您进行订阅时这些元素尚不存在（a.k.a是页面的DOM加载）。它将监听以查找可能添加到DOM以及与选择器匹配的未来元素。

使用jQuery和AJAX提交动态插入页面的表单？

1 个答案: