Question

我遇到了ajax问题，我无法理解。我使用ajax post方法发送电子邮件。但每次我发一个帖子都会发生2次。我尝试过添加preventDefault和stopPropagation，但它似乎没有做到这一点。

Jquery

$(document).ready(function()
{
$("#submit_btn").click(function(event)
{
    event.preventDefault();
    event.stopPropagation();
    var proceed = true;
    var submit = $('#submit_btn');

    $("#contact_form input, #contact_form textarea").each(function () {
        $(this).closest("div").removeClass('has-error');
        if(!$.trim($(this).val())) {
            $(this).closest("div").addClass('has-error');
            proceed = false;
        }

        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
            $(this).closest("div").addClass('has-error');
            proceed = false;
        }
    });

    if(proceed){

        post_data = {
            'user_name'     : $('input[name=name]').val(),
            'user_email'    : $('input[name=email]').val(),
            'subject'       : $('select[name=subject]').val(),
            'msg'           : $('textarea[name=message]').val()
        };

        $.ajax({
           type: 'POST',
            url: "./mail.php",
            data: post_data,
            beforeSend: function() {
                submit.html('Sending...');
            },
            success: function(data){
                output = '<div class="alert alert-success" role="alert">Hi ' + $('input[name=name]').val() + ' Thank you for your email</div>';
                $("#contact_form").find("#contact_results").html(output).slideDown();
                submit.html("Send");
            },
            error: function(){
                output = '<div class="alert alert-danger" role="alert">Something went wrong. Please try again</div>';
                $("#contact_form").find("#contact_results").html(output).slideDown();
                submit.html("Send");
            }
        });
        return false;
    }
    else{
        output = '<div class="alert alert-danger" role="alert">Please fill in the required fields so I can get back to you !</div>';
        $("#contact_form").find("#contact_results").html(output).slideDown();
    }
});

$("#contact_form  input, #contact_form textarea").keyup(function() {
    $(this).closest("div").removeClass('has-error');
    $("#contact_form").find("#contact_results").slideUp();
});
});

HTML

<div class="clear" id="contact">
    <h3>Contact Me</h3>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <form role="form" id="contact_form" action="">
                    <div class="form-group">
                        <label for="name">Name</label><input name="name" type="text" placeholder="Name" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <label for="email">Email address</label>
                        <input name="email" type="email" placeholder="E-Mail" class="form-control" id="email" />
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <select name="subject" class="form-control" id="subject">
                        <option value="General Question">General Question</option>
                        <option value="Hire me!">Hire me !</option>
                        <option value="Partner with me!">Partner with me !</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label><textarea name="message" placeholder="Message" id="message" class="form-control" rows="5"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default" id="submit_btn">Send</button>
                    <div id="contact_results"></div>
                </form>
            </div>
        </div>
    </div>
</div>

如果有人能指出我正确的方向，那将非常感激。

Answer 1

尝试将$("#submit_btn").click(function(event)更改为$("#submit_btn").one('click',function(event)

如果这不起作用，请检查JS是否未加载两次

Jquery ajax发帖两次

1 个答案: