e.preventDefault（）後HTML錨標記不工作？

Question

當我在jQuery post方法中添加e.preventDefault();時，動態生成的錨標記不起作用。

這是jQuery代碼：

$(document).ready(function(){ 
    $('.img-rounded').on('click',function(e){ 
     e.preventDefault(); 
     $.post("LikeMail.php", 
      {fname: this.id} 
     ); 
    }); 
}); 

此HTML代碼：

<a href="<?php echo "viewProfile.php?id=" . $record['user_id'];?>" > 
    <img class="img-rounded" 
    src=" <?php echo "../shadi/images/" . $record['user_photo1'] ?>" 
    id="<?php echo $record['user_id']; ?>"alt="" width="70%" height="20%"> 
</a> 

我想知道是什麼問題存在。

THIS IS LikeMail.php

 <?php 
    session_start(); 
    ?> 
    <?php 

    if(!isset($_SESSION['login'])) { 
    echo ""; 


    } 
    else { 

     include("db.php"); 
     $user1 = $_SESSION['user_id']; 
    // echo $user1; 


     //This is being received from jquery 

     $user2 = $_POST['fname']; 

       //$lname = $_POST['surname']; 


      //echo $lname; 
      /*$sql = "UPDATE notification SET alert='$fname' WHERE id = '1'"; 
      if(mysqli_query($conn,$sql)) 
       echo "updated";*/ 


      $check_for_likes = mysqli_query($conn, "SELECT * FROM liked WHERE user1='$user1' AND user2='$user2'"); 
      $numrows_likes = mysqli_num_rows($check_for_likes); 
      if (false == $numrows_likes) { 
       echo mysqli_error($conn); 
      } 

      if ($numrows_likes >= 1) { 
       echo '<input type="submit" value="Unlike" id="Unlike" class="btn btn-lg btn-info edit">'; 


      } 
     if ($numrows_likes == 0) { 
       echo '<input type="submit" value="Like" id="Like" class="btn btn-lg btn-info edit">'; 
      } 


    }?> 
    <div class="respond"></div> 

這是AJAX功能被調用

function like() 
{ 
    var req = new XMLHttpRequest(); 
    req.onreadystatechange = function() 

    { 
     if(req.readyState==4 && req.status==200) 
     { 
      document.getElementById('Like').innerHTML=req.responseText; 

     } 
    } 
    req.open('GET','LikeMail.php','true'); 
    req.send(); 
} 
setInterval(function(){like()},1000); 

雖然user2.js是test.js代碼和上面的jquery我一樣thod

Answer 1

@ Zain Farooq請讓你的問題更具體，即你想實現什麼？如果使用e.preventDefault（），那麼事件的默認動作將不會被觸發，即，就像在您的情況下，錨標記不起作用。

EDIT1：如果你想使用其他頁面上POST方法，然後只錨標記，然後上班發送一些數據，可以使用下面的代碼：

我已經取得了一些變化：

<a class="profile" href="<?php echo "viewProfile.php?id=" . $record['user_id'];?>" > 
    <img class="img-rounded" 
    src=" <?php echo "../shadi/images/" . $record['user_photo1'] ?>" 
    id="<?php echo $record['user_id']; ?>"alt="" width="70%" height="20%"> 
</a> 

然後jQuery代碼會看起來像：

$(document).ready(function() { 

       $('.profile').on('click', function (e) { 

        //Get the href Link 
        var href = $(this).attr('href'); 

        e.preventDefault(); 
        $.post("LikeMail.php", 
          {fname: $(this).find(".img-rounded").attr("id")} 

        ).done(function() { 
        //Redirecting to anchor destination. 
         window.location.href = href; 

        }); 
       }); 
      }); 

EDIT2：我不明白你的問題，但如果你想檢查POST請求的響應，你可以使用下面的代碼。

$(document).ready(function() { 
       $('.profile').on('click', function (e) { 

        //Get the href Link 
        var href = $(this).attr('href'); 

        e.preventDefault(); 
        $.post("LikeMail.php", 
          {fname: $(this).find(".img-rounded").attr("id")}, function (returnedData) { 

         // Do whatever you want with returend data 
         console.log(returnedData); 

        }).done(function() { 

         //Redirecting to anchor destination. 
         //window.location.href = href; 


        }); 

       }); 

      }); 

Answer 2

e.preventDefault()是爲了防止默認動作發生。在這種情況下，它不會將您發送到您引用的頁面，因爲該操作將被取消。

您不能讓它發送POST請求並同時傳送您，因爲POST在頁面開始加載新頁面之前不會發送。

相反，您可以發送POST，然後更改頁面。您只需添加

window.location = this.href; 

$.post()完成後。這將改變位置（您所在的頁面），作爲在a-tag中指定的位置。簡單:)

由於this將參照.done()的承諾，因此您需要回顧點擊功能的this。只需輸入$this並將其設置爲點擊功能的this即可。

$(document).ready(function() { 
    $('.img-rounded').on('click', function(e) { 
     $this = this; 
     e.preventDefault(); 
     $.post("LikeMail.php", { 
      fname: this.id 
     }).done(function() { 
      window.location = $this.parentNode.href; 
     }); 
    }); 
}); 

編輯：感謝Benjy注意到這一點。你需要做$this.parentNode.href，因爲this是一個圖像。你想抓住父元素，這是錨標籤。