Jquery issue accessing HTML object - Part II

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!
1CougarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
look fine for me here : http://jsfiddle.net/00ppc0qe/1/

could you share a link to your page?
0
WebDevEMCommented:
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
1CougarAuthor Commented:
I have sent you each a private message with a link....

Thanks again!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

leakim971PluritechnicianCommented:
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
1CougarAuthor Commented:
Yes, I deleted extra commented out code...thanks for pointing this out...but it still doesn't work for me...

??
0
leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
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
1CougarAuthor Commented:
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
WebDevEMCommented:
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
leakim971PluritechnicianCommented:
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
1CougarAuthor Commented:
Thanks leakim971!  I will check it out!

Cheers,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.