多次触发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>

而且有效。 按照#form ，结果中的html替换为#form 。 但是，当我再次单击“ #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表单。 我为第一个公式使用相同的模板，为第二个公式使用相同的模板。 我已经检查了源代码，它始终是相同的（在单击按钮之前和之后）。

知道我的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>

Answer 1

因为当您替换表单内容时，单击处理程序将销毁的元素。

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

$(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;

    });


});