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

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;

Answers


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);
});

Try adding semicolons here:

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

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();
}

Need Your Help

Parse: How to know if user has a password?

javascript parse-platform

I want to find out if user has a password so that I can show/not show a button to change password for example. How can I do this?

Is there a way to set height and wrap content at the same time in android?

java android button height

I have a button, and I want it to have a minimum height of 50dp's but I also want it to get bigger and wrap if the text is too long, is this possible? Thanks