Form gets submitted twice with written ajax function

Question

I wrote a JQuery AJAX submit script which would submit a form with the class ajax through AJAX and serialize it etc etc Heres that script:

$("form.ajax").submit(function(){
   alert('a');
    var url = $(this).attr('action');
    if($(this).attr("element") != null)
    {
        var element = $(this).attr("element");
    }
    else if($(this).attr("element") == 'undefined')
    {
        var element = "render";
    }
    $("#"+element).html("<div id='loader'>Laden...<br /><img src=\"/site/templates/img/ajax-loader.gif\"/></div>");
    $.post(url, $(this).serialize(), function(data){

        $("#"+element).html(data);
    });
    return false;
}); 

Well, when i submit a form, any form with ajax class it gets submitted twice, i can see this in the network tab in the Chrome Console.

What is wrong, i dont get it ( i put alert ('a') there to check if it would pop up twice, but it does not).

Please help me?

EDIT: The HTML, i posted it a couple of times before but okay here we go:

<form  class='ajax' element='make-payment' action='/statistieken/maak-betaling'  method='post'>
<input type='hidden' name='charity_id' value='1749'>
<li class='form-item'><label for='amount'>Bedrag:</label></li>
<li class='form-item'><input type='text' id='amount' name='amount' /></li>
<li class='form-item'><input type='submit' value='Betalen' /></li>
</form>

Greetings, hawiak

Answer 1

try something like this

$("form.ajax").submit(function(){
   alert('a');
    var element;
    var url = $(this).attr('action');
    if($(this).attr("element") != null)
    {
        element = $(this).attr("element");
    }
    else if($(this).attr("element") == 'undefined')
    {
        element = "render";
    }
    $("#"+element).html("<div id='loader'>Laden...<br /><img     src=\"/site/templates/img/ajax-loader.gif\"/></div>");
    $.post(url, $(this).serialize(), function(data){

        $("#"+element).html(data);
    });
    return false;
});