javascript - 除非我重新加载网页，否则 jQuery 不会再次运行

Question

我创建了一个联系表单，当我点击一个按钮时我想从右边滑入，当我点击一个单独的按钮时我想滑回。到目前为止，我只能使用 .hide() 方法，但是当我再次单击按钮查看表单时，它不起作用。谁能解释一下为什么？

这是我的html代码

<div id="slidebottom" class="slide">            
<button id="button" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
</button>
<div class="well">
    <form action="index.html" method="post">
        <button id="close_button"><a><img id="close" src="img/close.png"></a></button>
        <h1 class="heading">CONTACT US</h1>
        <p>Register your interest and we will inform you of latest developments</p>

        <input type="text" id="name" name="user_name">
        <input type="email" id="email" name="user_email">
        <input type="tel" id="phone" name="user_number">

        <h1 class="register">REGISTER</h1>
    </form>
</div>

和我的 jQuery

$(document).ready(function() {
  $('#button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});

$('#close_button').click(function() {
  $('.well').hide();
});

Answer 1

$(document).ready(function() {
  $('#button').click(function() {
    var $lefty = $(this).next();
    $('.well').show();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});