Javascript 如何使用href并一起单击listener？

我有一个链接列表，每个链接都有href属性：

<a href="./page1.php" class="points">page 1</a>
<a href="./page2.php" class="points">page 2</a>
<a href="./page3.php" class="points">page 3</a>
<a href="./page4.php" class="points">page 4</a>

---

href可以工作，但单击不能，当我删除href属性时，单击侦听器可以完美工作。这两个功能是否可以一起工作？

您需要取消默认行为，因为一旦导航离开，脚本将停止运行。您可以考虑等到Ajax调用结束，然后通过脚本导航：

$(".points").live('click',function(e){ // <--- Add e parameter

    e.preventDefault(); // <--- Add this

    id = $(this).attr("id");
    href = $(this).attr("href"); // Link we will navigate to when done
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {
           location.href = href; // Do the navigation now that we're done
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});

---

Live（“点击”，函数（e）{//您需要取消默认行为，当您导航离开的时候，脚本将停止运行。您可以考虑等到Ajax调用结束，然后通过脚本导航：

$(".points").live('click',function(e){ // <--- Add e parameter

    e.preventDefault(); // <--- Add this

    id = $(this).attr("id");
    href = $(this).attr("href"); // Link we will navigate to when done
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {
           location.href = href; // Do the navigation now that we're done
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});

$（“.points”）.live（'click'，函数（e）{/尝试以下操作：

$(".points").live('click',function(e){ //added e as function argument
    e.preventDefault(); //added preventDefault();
    var id = this.id; // changed here to this.id, and added var (so it will be a local variable)
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {

        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});


了解
请注意，
从jQuery 1.7开始，.live（）方法已被弃用。请使用.on（）附加事件处理程序。
试试这个：

$(".points").live('click',function(e){ //added e as function argument
    e.preventDefault(); //added preventDefault();
    var id = this.id; // changed here to this.id, and added var (so it will be a local variable)
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {

        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});


了解
请注意，
从jQuery 1.7开始，.live（）方法已被弃用。请使用.on（）附加事件处理程序。
让Ajax和Href一起工作

试一试

让Ajax和Href一起工作

试一试

您是否尝试过：
$（“.points”）.live（'click'，函数（e）{e.preventDefault（）；
作为函数的第一行？此外，您可能希望使用
.on（）
而不是
.live（）
FYI:
.live
已被弃用很长一段时间，并从最新版本的jQuery中删除。请改用
.on
。您是否尝试过：
$（“.points”）.live（'click'，函数（e）{.e.preventDefault（）；
作为函数的第一行？此外，您可能希望使用
.on（）
而不是
.live（）
FYI:
.live
长期以来一直被弃用，并从最新版本的jQuery中删除。请改用
.on
。+1-我喜欢使用
this.id
的建议。除此之外，可能值得一提的是
id=this.id
在作用域链中创建全局变量或覆盖局部变量。This可能是正确的，但更可能是OPs代码中的疏忽。+1-我喜欢使用
this.id
的建议。除此之外，可能值得一提的是
id=this.id
在作用域链中创建了一个全局变量或覆盖了一个局部变量。这可能是正确的，但更可能是OPs代码中的疏忽。我希望他们另外，如果我添加这一行，它将只运行javascript，但href将不起作用（我尝试了）。是的，没有办法这样做。一旦导航离开，脚本将停止在该页面上运行。@BaselShbeb-一个可能的解决方案是等待Ajax调用完成，然后导航离开。我已经更新了代码（未经测试，希望能奏效）实现这一点的方法是在AJAX帖子的成功函数中使用link标记中的
href
属性显式调用location.href导航。您仍然需要
preventDefault
来执行AJAX调用。但是，我会注意到这与AJAX的目的完全矛盾。我希望他们一起工作。如果我添加这一行，它将只运行javascript，但href将不起作用（我尝试了）。是的，没有办法这样做。一旦导航离开，脚本将停止在该页面上运行。@BaselShbeb-一个可能的解决方案是等待Ajax调用完成，然后导航离开。我已经更新了我的代码（未经测试，希望能奏效）实现这一点的方法是在AJAX帖子的成功函数中使用link标记中的
href
属性显式调用location.href导航。您仍然需要
preventDefault
来执行AJAX调用。但是，我会注意到这与AJAX的目的完全矛盾。您需要
preventDefault（）
来运行此操作。您需要
preventDefault（）
来运行此操作。