如何使用href並單擊listener togather？

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 & 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); 
    } 
    }); 
    }); 

Answer 2

您需要取消默認行爲，當您離開時，腳本將停止運行。你可以考慮等到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 3

試試這個：

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