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

Question

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

我的表单HTML直到DOM生成整个页面后才生成或插入到页面中(它是从套接字post事件触发的，该事件使我的弹出窗口打开并插入此表单的HTML )。

也可以有多个表单插入到页面中，所以不只是一个。

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

<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发布这些表单。现在，它似乎没有检测到代码，尽管当我点击submit按钮时，它加载了一个新页面，而不是试图通过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负载)。它将侦听将来可能添加到DOM并与选择器匹配的元素。