AJAX请求后的HTML锚标签重定向链接 [英] HTML Anchor tag redirect link after ajax request

问题描述

我想写赶上用户点击网站菜单上的方法，但我想这个过程是沉默用户，主要是，当用户将鼠标悬停在一个锚标记，它会表现得正常（显示它包含的链接）。我已经试过各种方法可以做到这一点，和我差不多有现在的工作，我的code是如下：

I'm trying to write a method to catch user clicks on a site menu, but I want the process to be silent for the user, mainly, that when a user hovers over an anchor tag, it would behave normally (showing the link it contains). I've tried in various ways to do this, and I almost have it working now, my code is as follows:

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

和jQuery中，我有：

And in jQuery, I have:

$(".selectAnchor, .menuAnchor").click(function(event){
    event.stopPropagation();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        return true;
      }
    });
});

链接重定向到所选择的页面，但阿贾克斯code无法完成，因此都没有注册过的用户的点击。

The link redirects to the selected page, but the ajax code never finishes, thus never registers the user's click.

我试着使用事件。preventDefault，但没有办法恢复被取消的事件。

I tried using event.preventDefault, but there is no way to resume the cancelled event.

部分问题来自于额外的功能，比如说，大多数用户右键点击锚标记在新标签页打开（或使用控制+单击，或中等点击），并使用类似

Part of the problem comes from extra functionality, say, most users right click on the anchor tag to open in a new tab (or use control + click, or middle click), and using something like

<a href="javascript:saveClick(o)">Google</a>

不允许在网站上（出于安全原因）。

is not allowed on the site (for security reasons).

任何建议，这可怎么办呢？

Any suggestions how this can be done?

推荐答案

使用事件。preventDefault ，然后成功，使用位置.href = self.href

Use event.preventDefault, then on success, use location.href = self.href

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    var self = this;

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = self.href;
      }
    });
});

或使用上下文属性的删除无功自我=这个

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);

    $.ajax({
      type: 'POST',
      context: this,
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = this.href;
      }
    });
});

这篇关于AJAX请求后的HTML锚标签重定向链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！