asked on

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!

leakim971

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

could you share a link to your page?

WebDevEM

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

1Cougar

ASKER

I have sent you each a private message with a link....

Thanks again!

leakim971

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

1Cougar

ASKER

Yes, I deleted extra commented out code...thanks for pointing this out...but it still doesn't work for me...

??

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

1Cougar

ASKER

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,

WebDevEM

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.

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

1Cougar

ASKER

Thanks leakim971! I will check it out!

Cheers,