Click event not always fireing in Drupal behaviors I'm having a strange problem with a form. Sometimes I have to click the submit button twice to make it submit my form. It also seems to work if I click outside the form before I click submit. The form is built inside a module with FORM API and is submitted with an ajax request. I have some js attached to the form so I can make some client side validation before the ajax call is run. This is what my js code looks like:

(function ($) {

Drupal.behaviors.mymodule = {
attach: function (context ,settings) {

    // Cache the form object
    var $form = $("#mymodule-form", context);
    var $submitButton = $('input[type="submit"]', $form);

    // Use once so we dont attach submit multiple times
    // Use off to remove any existing submit handler
    $form
        .once('mymodule')
        .off('submit')
        .on('submit', function(e){
            e.preventDefault();
            var $form = $(this);

            $(function () {
                $('#mymodule-form').submit(function () {
                    if($(this).valid()) {
                        $submitButton.trigger('submitmyform');
                    }
                });
            });

        });

        $(document).ajaxComplete(function(e, xhr, settings) {
            $('#mymodule-form').resetForm();
            $('#edit-mymodule-submit').replaceWith( "&lt;div id='mymodule-confirmation'&gt;TACK FÖR DIN ANMÄLAN&lt;/div");

        });

         // Run validation on $form object.
        jQuery.validator.setDefaults({
            debug: false,
            success: "valid",
        });


        $('#mymodule-form').validate({
            rules: {
                mymodule_name: {
                    required: true,
                },
                mymodule_length: {
                    required: true,
                },
                mymodule_suite: {
                    required: true,
                },
                mymodule_email: {
                    required: true,
                    email: true,
                },
                mymodule_phone: {
                    required: true,
                },
            },
            messages: {
                mymodule_name: {
                    required: "lorem ipsum",
                },
                mymodule_length: {
                    required: "lorem ipsum",
                },
                mymodule_suite: {
                    required: "lorem ipsum",
                },
                mymodule_email: {
                    required: "lorem ipsum",
                    email: "lorem ipsum"
                },
                mymodule_phone: {
                    required: "lorem ipsum",
                },
            },
        });

}



};


})(jQuery);


This is what my code looks like for the submit button:

    $form['mymodule_submit'] = array(
       '#type' =&gt; 'submit',
       '#value' =&gt; t("SEND!"),
       '#ajax' =&gt; array(
           'callback' =&gt; 'mymodule_form_callback',
           'wrapper' =&gt; 'mymodule-form',
           'event' =&gt; 'submitmymodule',
        ),
     );


Can anyone see what's wrong with this code?
See comments below...    

      .on('submit', function(e){ // Not correct way of using submit.
                e.preventDefault();
                var $form = $(this); // You have already defined this global variable?

                $(function () { // you dont need to check if the document is ready, thats what behaviours are for.
                    $('#mymodule-form').submit(function () { // Why are you submitting again here?
                        if($(this).valid()) {
                            $submitButton.trigger('submitmyform'); // What are you trying to trigger?
// If the form is already submit, why are you doing anything with the submit button?
                        }
                    });
                });

            });


Try this...

var $form = $("#mymodule-form", context);

$form.submit(function(e){
  e.preventDefault();
    if($(this).valid()) {
       // Do something else...
    }
});


UPDATE

You are probably binding to the form before it exists. Bind the event to the document, and pass the form selector...

$(document).on('submit', '#mymodule-form', function(e){
    // Do something...
});