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。但是，当我再次点击#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;

    });


});

不止一次在AJAX成功部分中触发.html（结果）

1 个答案: