HTML-якорный тег не работает после e.preventDefault()?

Question

Когда я добавляю e.preventDefault(); в методе почтового сообщения jQuery, динамически созданный тег привязки не работает.

Это 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> 

Я хочу знать, что это проблема.

ЭТО 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> 

ЭТО test.js код, где функция Аякса звонит

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 является то же, что и выше jquery me thod

Answer 1

@Zain Farooq, пожалуйста, сделайте свой вопрос более конкретным, и чего вы хотите достичь? Если используется e.preventDefault(), действие по умолчанию для события не будет запущено, то есть, как и в вашем случае, тэг привязки не будет работать.

EDIT1: Если вы хотите отправить некоторые данные, используя метод столба на другой странице, а затем только якорный тег для работы, то вы можете использовать следующий код:

Я сделал некоторые изменения:

<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: Я не понимаю ваш вопрос, но если вы хотите, чтобы проверить реакцию запроса после вы можете использовать следующий код.

$(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 и THEN изменить страницу. Вам просто нужно добавить

window.location = this.href; 

после $.post() делается. Это изменит местоположение (страница, на которой вы находитесь), в качестве места, указанного в теге a. Простой :)

Потому что 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; 
     }); 
    }); 
}); 

EDIT: Благодаря Бенджи, заметив это. Вы должны сделать $this.parentNode.href, так как this это изображение. Вы хотите захватить родительский элемент, который является тегом привязки.