Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1535
  • Last Modified:

Jquery dynamically add event handlers in a loop.

I want to be able to add mouseover events for multiple divs.  The included code line 12 works.  Line 13 works to show #mnuHidePanel, however line 13 does not work to add this show event:

$('#'+menuItems[i]).show(100).

When I directly add event handlers (the commented out code) it works.
<script type="text/javascript">
	$(document).ready(function(){
    var menuItems = new Array();
    menuItems[0] = 'mnuHome';
    menuItems[1] = 'mnuContent';
    menuItems[2] = 'mnuPetition';
    menuItems[3] = 'mnuBlog';
    menuItems[4] = 'mnuCommunication';
    menuItems[5] = 'mnuSecurity';
    for(i=0;i<menuItems.length;i++)
    {
      $('#'+menuItems[i]).css('left', $('#'+menuItems[i]+'Top').position().left+3);
      $('#'+menuItems[i]+'Top').mouseover(function(){$('#'+menuItems[i]).show(100); $('#mnuHidePanel').show(100);});  
    }
    $('#mnuHidePanel').hide();
    
		//$('#mnuHomeTop').mouseover(function(){$('#mnuHome').show(100); $('#mnuHidePanel').show(100);});
		//$('#mnuContentTop').mouseover(function(){$('#mnuContent').show(100); $('#mnuHidePanel').show(100);});
		//$('#mnuPetitionTop').mouseover(function(){$('#mnuPetition').show(100); $('#mnuHidePanel').show(100);});
		//$('#mnuBlogTop').mouseover(function(){$('#mnuBlog').show(100); $('#mnuHidePanel').show(100);});
		//$('#mnuCommunicationTop').mouseover(function(){$('#mnuCommunication').show(100); $('#mnuHidePanel').show(100);});
		//$('#mnuSecurityTop').mouseover(function(){$('#mnuSecurity').show(100); $('#mnuHidePanel').show(100);});
		
		$('#mnuHidePanel').mouseover(function(){$('div').filter('.mnuDropDown').hide(100);$('#mnuHidePanel').hide(100);});
	});
</script>

Open in new window

0
micahburnett
Asked:
micahburnett
  • 2
  • 2
1 Solution
 
micahburnettAuthor Commented:
If I could do the same thing without creating the array, that would be nice as well.
0
 
Albert Van HalenCommented:
Ok try a different approach
You probably have the 'top menus' somewhere in your HTML (wrapped in a div with a specific class or id)
Assuming that it's the case; check out this example.
<div id="menu">
	<div id="mnuHomeTop">Home</div>
	<div id="mnuContentTop">Content</div>
<div>
 
$(document).ready(function() {
	// Loop through each div within the 'menu' div 
	$("#menu div").each(function() {
		// Replace 'Top' from the id of the div (i.e. mnuHomeTop becomes mnuHome)
		var childMenuID = this.id.replace(/Top$/,"");
		$('#'+childMenuID).css('left', $(this).position().left+3);
		// Bind onmouseover event to the div
		$(this).mouseover(function() {
			$('#'+childMenuID).show(100);
			$('#mnuHidePanel').show(100);
		});
	});
});

Open in new window

0
 
micahburnettAuthor Commented:
Beautiful, thank you!

I added the line below for each mouseover so the previous menus will all be hidden before the new menu is shown.  The only problem is that when going across the menu items, often two or more are left open unless going over the top menu items slowly.  Changing .show(100) to .show() also fixes it but I loose the animation.  Is this common behavior?

$('div').filter('.mnuDropDown').hide()
		$(document).ready(function() {
		  // Loop through each div within the 'menu' div 
		  $("#topMenu div").each(function() {
		    // Replace 'Top' from the id of the div (i.e. mnuHomeTop becomes mnuHome)
		    var childMenuID = this.id.replace(/Top$/,"");
		    $('#'+childMenuID).css('left', $(this).position().left+3);
		    // Bind onmouseover event to the div
		    $(this).mouseover(function() {
		      $('div').filter('.mnuDropDown').hide()
		      $('#'+childMenuID).show();
		      $('#mnuHidePanel').show();
		    });
		  });
		  $('#mnuHidePanel').mouseover(function(){$('div').filter('.mnuDropDown').hide();$('#mnuHidePanel').hide()});
		});

Open in new window

0
 
Albert Van HalenCommented:
I guess.
What it does : the element gets displayed with 0 opacity and sets it to full opactity within the specified timeframe. In your case 100 msec.

There's the stop method. Check it out. Maybe you can use it.
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now