Question

我有一个链接列表，每个链接都有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>

我有一个班级“点”的听众：

$(".points").live('click',function(){
    id = $(this).attr("id");
    $.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);
        }
    });
});

href是可行的，但是点击没有，当我删除href属性时，点击监听器工作得很好。这两个人有可能工作吗？

Answer 1

您需要取消默认行为，因为当您离开时，脚本将停止运行。您可以考虑等待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);
        }
    });
});

Answer 2

试试这个：

$(".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);
        }
    });
});

阅读preventDefault()
请注意As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Answer 3

对于Ajax＆amp; Href一起工作

尝试

  $(".points").live('click',function(e){
  e.preventDefault();
  var id = $(this).attr("id");
  var url= $(this).attr("href");

   $.ajax({
   type: "POST",
   url: 'points.php',
   data:{id:id},
    success: function()
    {
     //Do something before going to page
       window.location.href=url;

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

如何一起使用href和点击监听器？

3 个答案: