当我刷新页面时，Jquery 代码无法完成

Question

I have implemented AJAX code which calls an external page in PHP where a DB is queried and creates a table. When AJAX calls the page the jQuery code inserts the PHP table in a <p> tag which creates a sort of "box" through an animation and resizes the box to HEIGHT according to the PHP table. When it is called the first time it works correctly, when I then close the "box" using the appropriate button and click on it again to review the box, the latter remains blocked with the standard height of the <p> tag with which it was defined. How can I fix this and make it work every time I run the jQuery animation without having to refresh the page?

<input type="button" value="Close Ripostiglio" class="hidden1" onclick="close1()">
    <p class="par1" id="pa1"> Ripostiglio </p>
    <script>
    function loadDocument(e) {
      var httpRequest = new XMLHttpRequest();
      httpRequest.onreadystatechange = gestisciResponse;
      httpRequest.open("GET","function.php", true);
      httpRequest.send();
      httpRequest.reload();
    }
    function gestisciResponse(e) {
      if (e.target.readyState == 4 && e.target.status == 200) {
        document.getElementById("dinamicZone").innerHTML = e.target.responseText;
      }
    }
                    //OPEN BOX
      $(document).ready(function(){
        //RIPOSTIGLIO
        $(".par1").click(function right(){
          var p = $(".par1");
          var n = $(".hidden1");
          p.animate({left: '300px'}, "slow");
          p.animate({height: '$(#dinamicZone).height()'}, "slow");
          p.animate({width: '350px'}, "slow");
          p.html("<div id='dinamicZone'></div>");
          setTimeout(loadDocument, 2000); //delay the open of table
          n.show();
        });
        function close1(){
        $(".nascosto1").click(function destra(){
          var p = $("#pa1");
          var p = $(".par1");
          var c = $(".hidden1");
          var s = $(".add1");
          p.animate({height: '65px'}, "slow");
          p.animate({width: '150px'}, "slow");
          p.animate({left: '0px'}, "slow");
          s.hide();//TOLGO LA SCRITTA AGGIUNGI
          p.html("Ripostiglio"); //"RIMETTO" FORZATAMENTE LA SCRITTA CANTINETTA VINI
          c.hide();
        });
      }
</script>

Answer 1

The dinamicZone object was destroyed in close1(). So when you click on it again, it has no reference to change size to. Reloading the page will reinitialize the page, thus recreating dinamicZone.

Perhaps change the line in close() where you reassign the value of p.HTML. If you comment out that line, the resizing should work.

---- ignore below this ----

Without it, you're trying to set the height to 65 when it contains an object that is higher, which is probably why it did not work. 

```
 $(".nascosto1").click(function destra(){
          // var p = $("#pa1");  // duplicate
          var p = $(".par1");
          var c = $(".hidden1");
          var s = $(".add1");
          p.html("Ripostiglio"); //"RIMETTO" FORZATAMENTE LA SCRITTA CANTINETTA VINI
          p.animate({height: '65px'}, "slow");
          p.animate({width: '150px'}, "slow");
          p.animate({left: '0px'}, "slow");
          s.hide();//TOLGO LA SCRITTA AGGIUNGI
          c.hide();
        });
```