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

Question

我有一个使用 JavaScript 生成的表单，然后插入到弹出的模态窗口中。

直到 DOM 生成整个页面之后，我的表单 HTML 才会生成或插入到页面中(它是由 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 事件，即使这些元素在您进行订阅时尚不存在(也称为页面的 DOM 加载) 。它将监听 future 可能添加到 DOM 中且与选择器匹配的元素。