Link does not work after div load

Question

Link does not work after div load

Navigation

#1 by (1 votes)

0

I'm doing a login , using Ajax to send the data to a PHP page, which returns with the response if the login was validated or not. If it's okay, I update a <div> with the logged in user's data and display the avatar without giving the refresh on the page, so far so good.

The problem I'm having is that after updating this <div> , the avatar link that opens a menu simply does not work, just me giving F5 it works again. Does anyone know what it can be?

I'm doing the following:

$("#login").click(function(){
  username=$("#username").val();
  if (username == "") {
    $("#add_erro_login").html("Digite o usu&aacute;rio cadastrado");
    $("#username").focus();
    return false;
  }

  password=$("#password").val();
  if (password == "") {
    $("#add_erro_login").html("Digite a senha cadastrada");
    $("#password").focus();
    return false;
  }

  $.ajax({
    type: "POST",
    url: "login.php",
    data: "name="+username+"&pwd="+password,
    success: function(html){
        if(html=='true')
        {
            document.form1.loading.style.visibility = "hidden";
            $("#login-form").fadeOut("slow");
            $("#background-on-popup").fadeOut("slow");
            $("#perfil").fadeOut("fast");
            $("#perfil").load("perfil.php");
            $("#perfil").fadeIn("fast");
         }
        else 
        {
            document.form1.loading.style.visibility = "hidden";
            $("#add_erro_login").html("Usu&aacute;rio ou Senha inv&aacute;lido");
        }
    },
    beforeSend:function()
    {
        document.form1.loading.style.visibility = "visible";
        $("#add_erro_login").html("");
    }
  });
  return false;
});

Top of the site, go and display the user data and your avatar

<div id="perfil">
  <?php 

  if(!isset($_SESSION)){
    session_start();
  }

  If(isset($_SESSION['avatar'])) {
      $avatar = $_SESSION['avatar'];
  }
  Else {
      $avatar = "usuario.png";
  }

  if(isset($_SESSION['usuario'])){
    echo "<div class='perfil-box'><div id='img-avatar'><a href='#'><img src='fotos/$avatar' width='40' height='40'></a></div><br>";
    echo "<div class='perfil-texto'><h1>Bem vindo,</h1><h2>" .$_SESSION['nome']. ' ' .$_SESSION['sobrenome']."</h2></div></div>";
    echo "<span class='seta-baixo'></span>";
  }
  ?>
</div>

The div id = 'img-avatar' shows and hides the menu

    $("#img-avatar").click(function(){

    if(document.getElementById("menu-perfil").style.display=="") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else if(document.getElementById("menu-perfil").style.display=="none") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else {
        document.getElementById("menu-perfil").style.display = "none";
        document.getElementById("seta-baixo").style.display = "none";
    }
});

Abs

php jquery ajax

asked by anonymous 29.10.2014 / 14:45

1 answer

Error in copying structured type vector How to get all rows using duplicate value in IN

score 1 · Accepted Answer

The association between the click event of #img-avatar and the JavaScript function that displays the menu is lost when the component is recreated (it is recreated in the Ajax request).

In order for the function to be re-bound to the click event after the component is re-created, assign it using the .on from JQuery.

For example:

$(document).on('click', '#img-avatar', function () {
    if(document.getElementById("menu-perfil").style.display=="") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else if(document.getElementById("menu-perfil").style.display=="none") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else {
        document.getElementById("menu-perfil").style.display = "none";
        document.getElementById("seta-baixo").style.display = "none";
    }
});