JavaScript code only works on first run [closed]

2

The code causes the search button to disappear and an input to enter the search will appear immediately

$('#dispara').on('click', function (event) {
  event.preventDefault();
  $('form div').addClass('active');
  $('#dispara').css("display", "none");
  //$('#caixa').focus();
  document.form1.caixa.focus(); //coloca o focu no input para ativar teclado do celular
});
$('#retorna').on('click', function (event) {
  event.preventDefault();
  $('form div').removeClass('active');
  //$('#caixa').blur();
  document.form1.caixa.blur(); //retira o focu no input para desativar teclado do celular
  $('#dispara').css("display", "block");
});
form {
  position:relative;
}
form div {
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  overflow:hidden;
  transition:all 1s ease-in;
}
form div.active {
  left:0;
}
#retorna{
  float:right;
}
#dispara{
  margin:8px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><headerdata-role="header" data-position="fixed">
  <h3 style="float:left;">Troca games</h3>
  <form name="form1">
    <button id="dispara" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all">Slide In!</button>
    <div>
      <input type="text" name="caixa"/>
      <button id="retorna" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">No text</button>
    </div>
  </form>
  <!-- Início navegação principal -->
  <nav data-role="navbar">
    <ul>
      <li><a href="#esquerda"><img src="images/configuracoes.png"/></a></li>
      <li><a href="home.php"><img src="images/home.png"/></a></li>
      <li><a href="trocas.php"><img src="images/trocas.png"/></a></li>
      <li><a href="jogos.php"><img src="images/jogos.png"/></a></li>
      <li><a href="desejos.php"><img src="images/desejos.png"/></a></li>
    </ul> 
  </nav>
</header>

Page where the code is being called

<?php include 'restrictions.php'?>
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Troca Games - Games com economia</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
  </head>   
  <body>
    <div data-role="page">

      <?php include 'header.php'?>

      <?php include 'sidebar_conf.php'?>
      <!-- data-position="fixed" fica fixo o menu -->
      <!-- Início principal -->
      <section data-role="content" style="padding:0;">

        <div class="titulo">
          <center><h1>Meus jogos</h1></center>
        </div>

        <?php include_once'meus_jogos.php' ?>

        <div class="titulo">
          <center><h1>Meus desejos</h1></center>
        </div>

        <?php include_once'meus_desejos.php' ?>

      </section>    
    </div>
  </body>
</html>
    
asked by anonymous 16.10.2015 / 19:12

0 answers