JQuery in second document ready not working

Question

I have two document ready events.

First , on page (working post request inserting html form), inserted by my WP shortcode:

<script type="text/javascript" >
    jQuery(document).ready(function($) {
        jQuery.post(
            ajaxUrl,
            {
                action: 'action',
                nonce: 'nonce'
            },
            function(response) {
                $('#place').removeClass('preloader');
                $('#place').html(response);
            }
        );
    });
</script>

Second (it worked until I added first code to page ), in js file loaded in footer:

jQuery(document).ready(function($) {
    $('#myform').submit(function(e) {
        e.preventDefault();
/* some ajax call with form data*/
    });
});

Second ready event fired, but $('#myform').submit not working. Can you help me?

Answer 1

It's not best practice to use document.ready function. If you include scripts at the footer level after all your required dom elements, they will run after the rest of the document and elements have loaded- thus, getting rid of the need for on document ready functions.

It's unclear what you are doing with the functions and how they could interact, but if one is changing the other make sure you're getting the elements you need. A good way to test is pop open the developer console in the browser and copy/paste your javascript code to see what works and what doesn't. You can type javascript in the console and run it real time on the dom loaded in your browser.