Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Jquery dynamically add event handlers in a loop.

Posted on 2009-06-29
4
1,521 Views
Last Modified: 2012-05-07
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
Comment
Question by:micahburnett
  • 2
  • 2
4 Comments
 
LVL 2

Author Comment

by:micahburnett
ID: 24738682
If I could do the same thing without creating the array, that would be nice as well.
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 24738895
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
 
LVL 2

Author Comment

by:micahburnett
ID: 24739482
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
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24739732
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Toggle & Anchor Links 5 43
Search Item in Table 2 19
How to filter by key press ? 6 20
why JSON Array data not binding on Model ASP.NET ? 1 10
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question