与链接和下拉选择器的PreventDefault相反？答案

【问题标题】：Opposite of PreventDefault for links and drop-down selector?与链接和下拉选择器的PreventDefault相反？
【发布时间】：2011-08-17 22:05:17
【问题描述】：

我的 MVC 视图中有一堆链接和一个下拉选择器的 jquery 点击事件，我在执行事件之前对它们进行了默认设置，因为它们中的大多数重定向到视图（重定向停止我的 jquery 代码不会不是吗？）。在点击事件中的所有回调之后，我希望链接和下拉选择器执行它们的默认事件，这样它就不会像什么都没发生一样坐在页面上。

有没有一种简单的方法可以让所有链接/下拉菜单返回默认值，然后以编程方式在 jquery 中单击它们？我试过 $(this).click() 和 $(this).submit() 和 e.click() 和 e.submit() 没有运气。

这是我的代码

 $("input,a,select").not("#SubmitButton").click(function (e) {
        e.preventDefault();
        console.log("prevented default");
        deletePreview($(this));
    });
    function deletePreview(button) {
        console.log("clicked");
        //Delete Offer from DB
        $.post('@Url.Content("~/")Offer/DeleteJoAnnOffer/?offerId=' + offerID, function (data) {
              console.log("finished deleting");
              if (button.attr('id') == "CancelButton") {
                 window.location.href = '@Url.Content("~/")Offer/CreateJoAnn/';
              } else {

                  //DO DEFAULT ACTION HERE

              }
       });
    };

[编辑]：还有一个问题：如果我不使用 preventDefault()，我的 jquery 事件会执行（以及初始部分，因为我的控制台记录了“点击”），但我无法确认 jquery 帖子是否实际正在执行因为控制台会在新页面上刷新。

【问题讨论】：

好问题。我也想知道这个:)
How to reenable event.preventDefault? 的可能重复项
第二个问题：如果后执行速度不够快，它的请求可能会被取消（请求中止）。所以它可能会也可能不会被执行。如果你把你的ajax请求变成同步的，就不会有这个问题了。

标签： jquery asp.net-mvc-3 callback click preventdefault

【解决方案1】：

jquery 中的“post”函数是异步操作（异步标志默认为真）。您在点击事件中的代码将在页面重新加载之前完整执行，因此无需使用 preventDefault。您必须将 deletePreview 中的 post 功能更改为同步：

        $("input,a,select").not("#SubmitButton").click(function (e) {
             console.log("you do not need to call prevented default :)");
             deletePreview($(this));
         });
         function deletePreview(button) {
             console.log("clicked");
             //Delete Offer from DB
             $.ajax('@Url.Content("~/")Offer/DeleteJoAnnOffer/?offerId=' + offerID,
             {
                 async: false,
                 success: function (data) {
                     console.log("finished deleting");
                     if (button.attr('id') == "CancelButton") {
                         window.location.href = '@Url.Content("~/")Offer/CreateJoAnn/';
                     } else {

                         //DO DEFAULT ACTION HERE

                     }
                 }
             });
         };

这意味着 click 事件中的代码将等到 deletePreview 中的 ajax 调用完成。

有关异步参数的说明请参阅http://api.jquery.com/jQuery.ajax/

【讨论】：

我知道$.post 是异步的，但是通过设置async: false，这是否实际上使链接等待我的点击事件完成后再执行操作？我认为关闭 async 只会让 jquery 代码等待该调用。
这正是发生的事情。通常你希望操作是异步的。但是如果你想确保 ajax 请求已经完成，你不能离开页面。导航离开将导致文档卸载，这将导致底层 XMLHttpRequest 对象被破坏并取消该过程中的任何未决请求。您可以通过使操作同步或在 ajax 对象的“成功”处理程序中执行元素默认操作来实现此目的。在这两种情况下，您都必须等待 ajax 调用完成，但第一个选项需要更少的编码并且更具可读性。
非常感谢，我会试试这个。如果我有 5 个嵌套 $.post 调用，我需要将所有 5 个转换为同步 ajax post 调用，对吗？
是的。或者您可以创建一个服务函数来执行所有 5 个任务（只是某种包装函数）。这会更快，因为您只需往返服务器一次。
添加type:"POST"参数后，就可以了！谢谢！我也会考虑创建一个包装函数。

【解决方案2】：

我认为在您的情况下，您不需要调用 preventDefault，因为您的事件处理程序将首先执行。（也许在你想在其他地方导航时调用它。）

【讨论】：

我不想完全阻止Default，我只是认为由于页面在所有控制台输出之前重定向，我的帖子没有完成。我这样想错了吗？