Question

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

在该页面上有两种形式，＃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

对于动态加载的内容，请使用如下所示的事件委派：

// 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){...});

Answer 2

将事件委托给未动态添加的更高级别的dom元素。

ie）

$("#FormContainer").on("#form1", "submit",function(){
    //   Do Form tuff....
});
$("#FormContainer").on("#form", "submit",function(){
   //   Do Form tuff....
});

Answer 3

与文档绑定

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


});

使用console.log进行sendurl

console.log(sendurl)

从Ajax Loaded页面提交Ajax表单

3 个答案: