javascript - AJAX 成功部分で .html(result) を複数回トリガーする

Question

ajax リクエストを処理するために、テンプレートにこのコードがあります ( の前に配置しようとしましたが、役に立ちません)。

<script>
    $(document).ready(function() {

        $("#send-mail-button").click(function(e){
            e.preventDefault();

            var nameVar        = $('#name').val();
            var emailVar       = $('#email').val();

            $.ajaxSetup({ cache: false });

            $.ajax({
                   type: "POST",
                   url: "<?php echo base_url(); ?>form/send",
                   data: { name          : nameVar,                    
                           email         : emailVar
                         },
                   success: function(result){
                      $('#form').html(result);
                   }

            });

            return false; 

        });


    });
</script>

そして、それは機能します。想定どおり、結果の#formhtml に置き換えられます。ただし、#send-mail-buttonもう一度クリックすると。何も起こりません。

コードを次のように変更すると:

<script>
    $(document).ready(function() {

        $("#send-mail-button").click(function(e){
            e.preventDefault();

            var nameVar        = $('#name').val();
            var emailVar       = $('#email').val();

            $.ajaxSetup({ cache: false });

            $.ajax({
                   type: "POST",
                   url: "<?php echo base_url(); ?>form/send",
                   data: { name          : nameVar,                    
                           email         : emailVar
                         },
                   success: function(result){
                      alert(result);
                   }

            });

            return false; 

        });


    });
</script>

フォーム html は毎回ポップアップで警告されます。最初のフォーミュラーに同じテンプレートを使用し、2 番目のフォーミュラーにも同じテンプレートを使用しています。ソースコードを確認しましたが、常に同じです（ボタンをクリックする前と後）。

私のjavascriptの何が問題なのですか？

更新: 私の HTML:

<div id="form">

    <form action="" method="post" accept-charset="utf-8">

        <label for="name">Name</label>
        <input type="text" name="name" id="name" />

        <label for="email">Email</label>
        <input type="text" name="email" id="email" />

        <button type="button" id="send-mail-button">Send</button>

    </form>

</div>