$(document).ready and jQuery(function($) not working; jQuery is defined, but script isn't entering .ready function

Question

EDIT:

Here is the full HTML . It was too long for me to paste directly here. I didn't create this page, I just have to clean up the problems with it.

---

I'm trying to run a function from inside $(document).ready, because I need the DOM to have finished loading before my function runs since I'm binding buttons. This is what I have in my script:

jQuery(function($) {
    alert('foo');
    SI.regionSelector.init();
});

I also tried:

$(document).ready(function(){
    alert('foo');
    SI.regionSelecter.init();
});

but the alert never happens. I've stepped through with the debugger in Chrome. I hit jQuery(function($), I don't get any errors (in fact the console shows what jQuery is defined as, so I know I have jQuery on my page), then the debugger jumps to the end of the jQuery function, but it simply never goes to the alert.

Here is the full script:

var SI = SI || {};

SI.regionSelector = {
  settings: {},
  regions: [],
  init: function() {
    jQuery('a').click(function(e){ e.preventDefault(); });
    // Start the DOMSelection tool when a region is clicked
    jQuery('#region-selector .region').click(function(){
      targetRegion = jQuery(this);
      SetupDOMSelection();
    });

    // When saving, pull the values stored by the DOMSelection tool
    // and stuff them into hidden fields so they can be picked up on
    // the back end.
    jQuery('#region-selector .save').click(function(){
      jQuery('#site_ingestor_region_selector .btn.region').each(function(){
        var values = {};
        values.innerHTML = jQuery(this).data('innerHTML');
        values.xpath = jQuery(this).data('xpath');
        var id = jQuery(this).attr('id');
        var $hiddenInput = jQuery('input[name="'+id.replace('btn', 'form-region')+'"]');
        $hiddenInput.val(JSON.stringify(values));
      });
    });

    jQuery('.btn.edit').click(function() {
      jQuery('#site_ingestor_html_editor').css('display', 'block');
      jQuery('body').css('overflow', 'hidden');
      window.scrollTo(0, 0);
    });
    jQuery('.btn.cancel').click(function() {
      jQuery('#site_ingestor_html_editor').css('display', 'none');
      jQuery('body').css('overflow', 'scroll');
        });
      }
};

jQuery(function($) {
    alert('foo');
    SI.regionSelector.init();
});

Answer 1

Some things I would check:

• ensure that jquery .js library is referenced before the script
• make sure your $ (or jQuery , depending on what you're using) doesn't conflict with any other library
• check for other JS errors (or other messages) in your browser's JS console

I would also run a full Markup page validation (maybe trim some markup to reduce complexity) to see if there are some blatant HTML errors, like missing closing body tags or similar stuff.