0

我的模板中有这段代码（我之前尝试过放置它，但没有帮助）来处理我的 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>
4

1 回答 1

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;

    });


});
于 2013-10-10T10:16:54.250 回答