0

好的，这里是这样的场景：应用程序是用 Ajax 构建的，请求我们需要多少服务？（我没有为此目的验证任何东西，但我应该）

假设我们将五个作为输入，表单返回带有 5 个框和一个提交按钮

<script>
    function test(){
        var num = $('#numServ').val();
        var form = "";

        form += "<form name='form2' id='services' method='POST' action='<?php echo $_SERVER['PHP_SELF'];?>'>";
        for(m=0;m<num;m++){
            // alert("<br>Voice le param"+m);
            form += "<br><input type='text' name='services"+m+"' value=''>";
        }
        form += "<input type='submit' name='services' id='btnServices' value='SERVICES'>";

        form += "</form>";
        alert(form);
        $('#generated').append(form)
    }
</script>

这部分有效......但是当我尝试使用 Ajax 提交表单时，该 Ajax 调用的函数被放置在 document.ready 函数中，它不起作用。

$('#form2').submit(function(){
    alert("Form Submitted");

    /*
    THE WHOLE CODE COMMENTED OUT IT STILL WON'T WORK
    var result = $(this).serialize();

    alert(result);
    $.ajax({
        url:"./content.php",
        data: result, 
        type: "POST",
        // cache:false,
        dataType:"html",
        success: function(data,jqXHR){$('body').append(data);},
        error: function(){alert('Check Ajax request');},
        complete:function(){alert("Ajax complete");}
    });
    */

    return false;
});

我已经做了好几天了。任何其他未使用 jquery 构建的表单都可以使用此方法工作，因为表单已经加载到页面上，并且不是由 ajax 即时生成的。

我相信我的问题在于 Ajax 在页面加载后制作表单......即使我对 sumit 表单的 Ajax 调用位于 document.ready 函数的头部。

有任何想法吗 ？

4

2 回答 2

1

jQuery 正在侦听 ID 为 的元素上的提交事件，form2但您的表单名为services。

此外，看起来您正在动态构建表单，因此提交事件可能不会触发，因为 jQuery 在表单存在之前加载。

如果是这种情况，请尝试使用$(#[ID of parent element that exists on page load]).on('submit', function() {...});

更新

jQuery .on()文档有很多很好的信息。简短的版本是事件“冒泡” DOM。通过将侦听器添加到页面加载时存在的元素，它可以捕获发生在其子项上的事件。

看起来您正在将表单附加到具有ID“生成”的元素......如果页面加载时存在此元素，则以下内容应该有效：

$('#generated').on('submit', function() {
    alert("Form Submitted");

    var result = $(this).serialize();

    alert(result);

    $.ajax({
        url:"./content.php",
        data: result, 
        type: "POST",
        // cache:false,
        dataType:"html",
        success: function(data,jqXHR){$('body').append(data);},
        error: function(){alert('Check Ajax request');},
        complete:function(){alert("Ajax complete");}*/
    });

    return false;
});
于 2013-04-07T00:43:22.750 回答
0

您的 jQuery 正在寻找一个表单，id='form2'但您的表单创建功能正在设置id='services' 所以 jQuery 没有运行，因为它没有匹配任何内容。

改变：

$('#form2').submit(function(){

到：

$('#services').submit(function(){
于 2013-04-07T00:39:32.410 回答