Question

我有一个脚本有两个方法，一个用Ajax提交表单

function saveCustomer(){
  $('#createCustomer').submit(function(ev) {
   ev.preventDefault();
   $('#submit').attr('disabled',true);
   var $inputs = $('#createCustomer :input');
   var values = {};
   $inputs.each(function() {
       values[this.name] = $(this).val();
   });
   $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    })
    $.ajax({
      url: '/customer',
      type : 'POST',
      data : values,
      success : function(data){
          //check if controller validation send customer exist
          if(data.confirmation){
            $("#confirmation").show();
          }
          else{
            $('#createCustomer :input').val('');
            $("#customer").hide();

            //assign values to success modal

              $('#firstName').val(data.customer.firstName);
              $('#lastName').val(data.customer.lastName);
              $('#street').val(data.address.street);
              $('#businessName').val(data.customer.businessName);

            $('#submit').attr('disabled',false);
          }
      },
      error : function(error){
          $('#submit').attr('disabled',false);
      }
    });
  });
}

一个函数，它向表单添加另一个输入并调用第一个函数

$('#proceedWithSave').on('click', function(){
  var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "proceed");

  $('#createCustomer').append($(input));
  saveCustomer();
});

现在第二个函数被成功调用，因为它添加了新输入，但是没有调用第一个函数，因为没有进行ajax调用。

关于这里可能出现什么问题的任何想法？

Answer 1

您想使用Ajax提交form点击$('#proceedWithSave') ...

所以只需删除$('#createCustomer').submit(function(ev) {行及其结束});括号。

function saveCustomer(){
  //$('#createCustomer').submit(function(ev) {
   //ev.preventDefault();
   $('#submit').attr('disabled',true);
   var $inputs = $('#createCustomer :input');
   var values = {};
   $inputs.each(function() {
       values[this.name] = $(this).val();
   });
   $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    })
    $.ajax({
      url: '/customer',
      type : 'POST',
      data : values,
      success : function(data){
          //check if controller validation send customer exist
          if(data.confirmation){
            $("#confirmation").show();
          }
          else{
            $('#createCustomer :input').val('');
            $("#customer").hide();

            //assign values to success modal

              $('#firstName').val(data.customer.firstName);
              $('#lastName').val(data.customer.lastName);
              $('#street').val(data.address.street);
              $('#businessName').val(data.customer.businessName);

            $('#submit').attr('disabled',false);
          }
      },
      error : function(error){
          $('#submit').attr('disabled',false);
      }
    });
  //});
}

$('#proceedWithSave').on('click', function(){
  var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "proceed");

  $('#createCustomer').append($(input));
  saveCustomer();
});

没有从jquery调用Javascript函数

1 个答案: