jQuery-driven app. won't work without alert()

Question

I have seen a lot of articles on this, but none dealing with jQuery, so here I go... I am implementing a version of a script from http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ into an existing application; however, I cannot get it to work without adding alert('msg...') as the first method within the $(document).ready() call.

This does not seem to have anything to do with load time... no matter how long I wait, the menu does not work. setTimeout() does not work either. Add alert(), however, and it works like a charm. I can also properly execute the bindings via Firebug.

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Answer 1

Try adding semicolons here:

$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout',  jsddm_timer);

Answer 2

Resolved: The site this is being placed on is largely driven by Ajax; thus, the DOM was seen as 'ready', although scripts were still processing in the background (i.e. while the menus were still being loaded).

Placing the initialization function just after the menu loader made this work.

// DOES NOT WORK
$(document).ready(function() {
  loadMenus();
  menuInit();
});

function loadMenus() {
  // load menu script...
}

// WORKS
$(document).ready(function() {
  loadMenus();
});

function loadMenus() {
  // load menu script...
  menuInit();
}

Answer 3

Instead of using .bind(), use .live() so that all future instances of the elements are taken care of. This should solve the ajax issue.

$(document).ready(function() {  
    $('#jsddm > li').live('mouseover', jsddm_open);
    $('#jsddm > li').live('mouseout',  jsddm_timer);
});