表单提交在AJAX之前完成，没有'alert（）'

Question

I have a page that uses AJAX to call for some html from a php script. In that html are many forms of a certain class with unique id's. Upon clicking the submit button the desire is to submit the form to a php script through AJAX so the page doesn't reload or redirect.

I have followed the examples of many tutorials ( Here for example ) and they all work... If i throw an alert in the $(document).ready(function(){...}); that wraps them. I have attempted at least three or four methods and the result is the always the same. Without an alert() in the .ready() the form POSTS to the current page.

So what I'm looking for is the fix for needing to throw up an alert() before calling the function that sends the POST since without it the POST is not caught by AJAX and just posts to the current .php file.

AJAX

function formSubmit(form) {

    var element = $(form);
    var id = element.attr("id");
    var form = new FormData($('#' + id)[0]);

    $.ajax({
        type: "POST",
        url: "deleter.php",
        data: form,
        cache: false,
        contentType: false,
        processData: false,

    });
}

$(document).ready(function () {
    alert(''); // Taking this out causes problems

    $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });
});

HTML

<div class="box">
    <div class="image">
        <a href='.htmlspecialchars($string).'><img src="blank.gif" data-src="'.htmlspecialchars($small).'" width="250" height="376"></a>
    </div>
    <div class="boxOffice">
        <form class="delete_form" id="'.$form_count.'">
            <input  type="hidden" name="delete_link" id="delete_link"value="'.  $string .'" />
            <input  type="submit" name="submit" class="submitButton" id="deleteLinkButton" value=""/>
        </form>
    </div>
</div>

I realize there are about 200 questions related to this... i know because i tried their solutions. I'm very new to AJAX ( this is my first project with it ) and I'm out of ways to re-arrange the code with the same result.

If it's needed I'll include the code i use to get the html i included.

-- EDIT -- Someone pointed out that the problem may be other JS on the page interfering with the call etc. So I'm attaching all the JS code on the page exactly how it currently is. In this state the POST is executing as expected but as soon as I remove the alert() it doesn't.

Interesting note, as I was grabbing the code I moved the getImages() call in and out of the ready() and it does seem to affect if the POST code works correctly. I have no clue why but it may be a clue.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.unveil.js"></script>

<script>
    $(document).ready(function () {
        alert(''); // Taking this out causes problems


            $('.delete_form').on('submit', function (event) {
                event.preventDefault();

                var element = $(this);
                var id = element.attr("id");
                var form = new FormData($('#' + id)[0]);

                $.ajax({
                    type: "POST",
                    url: "deleter.php",
                    data: form,
                    cache: false,
                    contentType: false,
                    processData: false,

                });
            });

    });

    getImages(); // Moving this inside the .ready(func(){...}) breaks the POST ?? 

    function getImages() {
        $.ajax({
            type: "GET",
            url: "http://localhost/linkler/get_images.php?tag=chubby",
            cache: false,
            timeout: 30000,
            success: function(html){
                $('body').append(html);
                $("img").unveil(); 
            }
        });
        return false;
    }

</script>

Answer 1

Not sure exactly what's the issue, but your js can be simplified:

$(document).ready(function() {

    $('body').on('submit', '.delete_form', function (ev) {
        ev.preventDefault();
        $.ajax({
              type: "POST",
              url: "deleter.php",
              data: $( this ).serialize(),
              success:function(data){
                   alert(data);
              },
              error:function(data){
                   alert(data);
              },


        });

    });
});

EDIT you are loading the forms via ajax correct? In which case you must bind your function to the parent element (body). See my syntax change.

Answer 2

Just take this method out of document ready part

 $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });

Answer 3

I think its about timing. Thats why the "alert('')" cannot be removed . Change the script to something like

function delete_form_init(){
 $('.delete_form').on('submit', function (event) {
    event.preventDefault();
    formSubmit(this);
    }



function formSubmit(form) {

var element = $(form);
var id = element.attr("id");
var form = new FormData($('#' + id)[0]);

$.ajax({
    type: "POST",
    url: "deleter.php",
    data: form,
    cache: false,
    contentType: false,
    processData: false,

});
}

$(document).ready(function () {
   delete_form_init();

});

});

This way the function delete_form_init will be insert into the model before the .ready calls it