Question

我的表单中有2个按钮。一个按钮仅供预览，另一个按钮用于通过AJAX提交表单

 <form id="form" action="" class="form" method="POST">
    <button id="btn_preview" type="button">  Preview </button>
    <button id="btn_save" type="submit">  Save </button>                                                                                
 </form>

我的问题是当我点击 按钮id =“btn_preview” 时，它总是在 按钮id =“btn_save”中触发事件 即可。我该如何解决这个问题？

$('#btn_preview').click(function () {

    form = $('form');

    form.attr({
              'target':'_blank',
              'action':'https://www.google.com'
             }).submit();

    return false;

});

$("#btn_save").closest('form').on('submit', function() {

    $.ajax({
       type: 'POST',
       url: 'URL',
       data: $('form').serialize(),
       success: function(data) {

          alert("Success!");                          

       }
    });

    return false;

});

Answer 1

语法错误“}）”

$('#btn_preview').click(function () {

        alert("Preview");
        return false;

    });

    $("#btn_save").closest('form').on('submit', function() {

        $.ajax({
           type: 'POST',
           url: 'URL',
           data: $('form').serialize(),
           success: function(data) {

              alert("Success!");                          

           }
        });

        return false;

    });

Answer 2

错误在你的jquery代码中。请用下面的一个更新。点击事件应以});而不是)};

结束

$('#btn_preview').click(function (event) {    
    event.preventDefault();
    alert("Preview");
});

$("#btn_save").closest('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
       type: 'POST',
       url: 'URL',
       data: $('form').serialize(),
       success: function(data) {

          alert("Success!");                          

       }
    });
    return false;
});

Answer 3

代码出错，请用下面的代码更新。点击事件和提交时应以});而不是)};

结束

$('#btn_preview').click(function(){
 alert("Preview");
 return false;
});

$("#btn_save").closest('form').on('submit', function() {

$.ajax({
   type: 'POST',
   url: 'URL',
   data: $('form').serialize(),
   success: function(data) {

      alert("Success!");                          

   }
  });

   return false;

 });

jsfiddle：https://jsfiddle.net/s3s1hbxz/4/

您还可以修改代码，仅按id或class定位表单。对于你的情况你是html代码<form id="form" action="" class="form" method="POST"> <button id="btn_preview" type="button"> Preview </button> <button id="btn_save" type="submit"> Save </button> </form>

所以你可以尝试这样：

$('#btn_preview').click(function(){
 alert("Preview");
 return false;
 });

$("form#form").on('submit', function() {

$.ajax({
   type: 'POST',
   url: 'URL',
   data: $('form').serialize(),
   success: function(data) {

      alert("Success!");                          

   }
  });

  return false;

});

这意味着它只会触发submit按钮命中。 jsfiddle：https://jsfiddle.net/s3s1hbxz/5/

Button不断提交其他事件（jQuery）

3 个答案: