javascript - jQuery click 事件首先然后跟随 url

Question

我想调用一个点击事件，然后按照 href url。

HTML 链接：

<a class="autoSave" href="?year=2013&amp;week=42">←&lt;/a>

JS：

 $(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       $('.submitForm').click(); //HTML Form that I'm wanting a submit to happen
       window.location = $(this).attr('href');
     });

 }); 

上面的代码只会跟随 url 而不会提交表单。如果我省略 window.location 调用，则提交有效。

Answer 1

您无需等待.click()事件完全处理即可调用window.location.

您应该序列化您的表单，通过 ajax 发布它（.post()例如），然后在 的回调中.post()更改您的页面：

$(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       var serializedData = $('#yourForm').serialize(); //For example
       $.post('your/path/to/form/validator', serializedData, function(){
          window.location = $(this).attr('href');
       });
     });
}); 

Answer 2

如果浏览器不尝试遵循表单操作，您将无法提交表单。您需要使用 ajax 将您的自动保存数据发布到您的提交表单，然后在 ajax 成功返回时执行窗口重定向。

 $('.autoSave').click(function(event){
   event.preventDefault();
   $.ajax({
      url: "whatever your submitForm.click() file is",
      type: "POST",
      data: {
        formField: theValue
        anotherFormField: theValue,
  },
  success: function( data ) {
        window.location = $(this).attr('href');         
  }
   });
}

Answer 3

问题是浏览器不会等到 for m 提交完成后才卸载页面并跟随链接。

我建议将位置重定向移动到表单提交的末尾：

$('.autoSave').on('click', function(event){
   event.preventDefault();
   $('.submitForm').triggerHandler('submit', [$(this).attr('href')]); 
 });

$('.submitForm').on('submit', function(event, url) {
 // Do the thing
 window.location = url;
}) 

Answer 4

给您的表单一个id并使用该submit()功能提交它。在 ID 上使用 jQuery 选择器而不是类，特别是如果你回收了你给它的类。

HTML

<form id="submitForm">...</form>

Javascript

$(document).ready(function() { 
    $('.autoSave').click(function(event){
        event.preventDefault();
        $('#submitForm').submit(); 
        window.location = $(this).attr('href');
     });
});

Answer 5

如果您的表单是标准表单，最简单的做法是将隐藏输入字段值设置为后续 url：

$(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       $('#redirectUrl').val($(this).attr('href'));
       $('.submitForm').click(); //HTML Form that I'm wanting a submit to happen
     });

 }); 

在这种情况下，您必须完全控制服务器端，并且您将能够测试该值并执行 301。

这远非理想。有很多选项，但几乎所有选项都是骇人听闻的，以便从单个事件中重复发布。