Solved

Jquery issue accessing HTML object - Part II

Posted on 2014-09-26
11
186 Views
Last Modified: 2014-09-26
Hello,

This is a continuation to my previous question as I realized my issue is not solved.  This is HTML:

<div id="menuitem1" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Overview</a>
 | 
<a id="2Menuitem" class="langmenu">The Tile</a>
 | 
<a id="3Menuitem" class="langmenu">The Content</a>
 | 
<a id="4Menuitem" class="langmenu">The Filter Panel</a>
 |
</div>
</div>

Open in new window


This code works (alert("here") gets called):

$(document).ready(function() { 
		alert("ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						

});

Open in new window


But, this code (taking out the alert("ready");) does not work, the alert "here" never gets called....

$(document).ready(function() { 
		//alert("ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						

});

Open in new window


Just can't figure out what is going on.....

Thanks again!
0
Comment
Question by:1Cougar
[X]
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
  • 5
  • 4
  • 2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40345919
look fine for me here : http://jsfiddle.net/00ppc0qe/1/

could you share a link to your page?
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40345921
Hi,

There must be something else going on that we're not seeing... I created a Fiddle at http://jsfiddle.net/webdevem/y0wxau30/ which works with both versions of your javascript.  When I click on any of the links, I still get an alert that says "here".  I've tested this in Chrome for Mac and IE11 for Windows.  ( I also used versions of jQuery from 1.6.4 up to 2.1.0)

Can you tell us more about when this happens, or possibly post a link to the site?  (Posting a link to the site would help more, but I realize this isn't always possible.)

WebDevEM
0
 

Author Comment

by:1Cougar
ID: 40346200
I have sent you each a private message with a link....

Thanks again!
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 82

Expert Comment

by:leakim971
ID: 40346209
you've a typo in the code, see line 12 :

$(document).ready(function() { 
	//alert("document ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						
d <------------here
});
}

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40346219
Yes, I deleted extra commented out code...thanks for pointing this out...but it still doesn't work for me...

??
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40346248
you're creating the menu with ajax, so put the code line 4 to 8 after generating the menu, inside the callback function of your ajax call.

else just replace :
$("#mainMenu a.langmenu").click(function(e){
by :
$(document).on("click", "#mainMenu a.langmenu", function(e){
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40346253
else the first solution :
$.getJSON( url1, function(result1) {

	$.each(result1.rows, function(m,val){
								  var thesemenus =[];
								var $div2 = $('<div/>').appendTo("."+$.trim(result1.rows[m].abbr));
								$div2.attr('id', 'menuitem'+result1.rows[m].id);
								$div2.attr('class', 'menuitem');
								var thismenu = '<div id="mainMenu">|';
		$.each(result1.rows[m].data, function(n,val){
				//alert(tmpItem[m].data[n].text);
				
    	thismenu = thismenu+'&nbsp;<a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a>&nbsp;|';
	
	

		});
		 thismenu = thismenu + '</div>';
		thesemenus.push(thismenu);
//alert(result1.rows[m].id);
$(thesemenus.join("")).appendTo("#menuitem"+result1.rows[m].id);	
		});	

// PUT THE CODE HERE :
$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});
// END	 	


						 
});

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40346254
Thanks, that worked.  But, why does this work $(document).on("click", "#mainMenu a.langmenu", function(e){  and not the other code?  Can you explain the difference so I know for the future?

Thanks,
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40346257
I see that spin.js is not loading, but that shouldn't cause the error you're seeing.  I need to go into a meeting in a few minutes, but my hunch is that there's a problem with the nesting of other { } sets around the code in question.  I went into the Developer Tools in Chrome and ran this manually:
$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	

Open in new window

After that, clicking on the menu gave me the alerts as expected.  That tells me the code wasn't being run during the page load.  When I get out of the meeting I'll see if I can narrow down the nesting issue.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40346270
you create the menu after setting the event, you  cant attach event to non existing element
here : $(document).on("click"
you attach the click event to the document itself, and once the user click on the document, anywhere, jQuery will check if it's on the menu

Check here if you want to learn more :
http://api.jquery.com/on/#direct-and-delegated-events
0
 

Author Comment

by:1Cougar
ID: 40346278
Thanks leakim971!  I will check it out!

Cheers,
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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