javascript - 从 Ajax 加载页面提交 Ajax 表单

Question

我有一个在ajax内生成的页面。

该页面上有 2 个表单，#form1 和 #form2。

我有jquery提交表单的代码如下:

jQuery("#form1").on('submit', function(e){

        e.preventDefault();

        var sendurl = '/xxx/xxx/xxx/xxx.php';

        var varable1 = jQuery('#infor1').val();
        var varable2 = jQuery('#infor2').val();
        var varable3 = jQuery('#infor3').val();
        var varable4 = jQuery('#infor4').val();
        var varable5 = jQuery('#infor5').val();
        var varable6 = jQuery('#infor6').val();
        var varable7 = jQuery('#infor7').val();

        jQuery.ajax({url: sendurl + '?varable1=varable1' + 'varable2=' + varable2 + 'varable3=' + varable3 + 'varable4=' + varable4 + 'varable5=' + varable5 + 'varable6=' + varable6 + 'varable7=' + varable7}).done(function(data) {

            if(data === 'fail'){
                jQuery('.error').html('Something went wrong with your form request please try again!').slideDown(500).delay(4000).slideUp(500);
                jQuery('input[type=submit]', jQuery("#submittions")).removeAttr('disabled');
                return false;
            }

            if(data !== 'fail'){
                jQuery('#showresults').slideUp(600);
                jQuery('.show-complete-detail').html(data);
                jQuery('#applicationcomplete').delay(1500).slideDown(400);
            }

        }); 
});

我也尝试过:

jQuery().submit();

这也不起作用。

我假设因为页面是使用ajax加载的，所以它找不到id为form1的表单？

有人对我哪里出错有任何想法吗？

谢谢:)

Answer 1

对于动态加载的内容，请使用事件委托(delegate)，如下所示:

// replacing document with top level parent
// something like parent container
jQuery(document).on('submit','#form1', function(e){ ... }

还有一件事，像这样从 ajax url 传递数据是个坏主意，您应该使用数据属性来发送数据，请参见下面的示例:

$.ajax({
     type : 'POST', // or GET
     url : 'your url here',
     data : {
        var1 : variable1
         .......
     },
    .... Another properties...
 }).done(data){...});