Link does not work after <div> load

Question

Link does not work after <div> load

Asked 10 years ago

Viewed 193 times

0

I’m making a login, using Ajax to send the data to a PHP page, which returns with the answer if the login has been validated or not. If it is ok, I update a <div> with the user data logged in and display the avatar, without giving the refresh on the page, so far so good.

The problem I’m having is that after this update <div>, the avatar link that opens a menu, just doesn’t work, just me giving a F5 it comes back to work. Someone knows what can be?

I’m doing it this way:

$("#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, walk are displayed 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>

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

I mean, your problem is $("#perfil").load("perfil.php")? What does the avatar have to do with it? Can you show a reduced version of your HTML? Check out the guide How to make a Minimum, Complete and Verifiable example.

– brasofilo

2014/10/29 at 14:50
The html components that are updated after the Ajax request are actually recreated. Thus, the associations of Javascript functions (for example in the event onclick) are lost. You have to re-associate the function or associate it in a way that it is redone during the recreation of the html component. If you explain your code better and also show the html code, we can help more.

– Caffé

2014/10/29 at 14:54

1 answer

Browser other questions tagged php jquery ajax

You are not signed in. Login or sign up in order to post.

by Caffé • **17,429** points · Answer 1 · 2014-10-29T16:33:50+00:00

The association between the #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-associated with the click event after the component is recreated, assign it using the method .on 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";
    }
});