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是一个图像。你想抓住父元素，这是锚标签。