Javascript 在AJAX成功部分多次触发.html（result）

我的模板中有以下代码（我以前尝试过将其放在模板中，但没有帮助）来处理我的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>

表单html每次都会在弹出窗口中发出警报。我对第一个公式使用相同的模板，对第二个公式使用相同的模板。我已经检查了源代码，它总是一样的（在点击按钮之前和之后）

知道我的javascript有什么问题吗

更新： 我的HTML：

名称
电子邮件
发送

因为在替换表单内容时，单击处理程序所指向的元素将被销毁

这里是在第一个请求完成后处理动态元素，因此需要使用事件委派

$(document).ready(function () {

    $("#form").on('click', '#send-mail-button', 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;

    });


});

$（文档）.ready（函数（）{
$（“#表单”）。在（'单击'，'发送邮件按钮'，功能（e）{
e、 预防默认值（）；
var nameVar=$（'#name'）.val（）；
var emailVar=$（'#email'）.val（）；
$.ajaxSetup({
缓存：false
});
$.ajax({
类型：“POST”，
url:“表单/发送”，
数据：{
姓名：nameVar，
电子邮件：emailVar
},
成功：功能（结果）{
$（'#form'）.html（结果）；
}
});
返回false；
});
});

您可能正在替换

#send mail button

元素，因此带有绑定处理程序的元素不再存在。按建议使用事件委派哇，它正在工作；）。我想我需要更多地检查活动授权。

<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>

$(document).ready(function () {

    $("#form").on('click', '#send-mail-button', 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;

    });


});