asked on

Jquery issue accessing HTML object

Hello,

I would like to have a function execute when the user clicks on a hyperlink, but I think I am somehow not getting the right object as the function never gets called. Here is a snippet of the HTML:

<div id="menuitem2" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Sommaire</a>
 | 
<a id="2Menuitem" class="langmenu">Le carreaux</a>
 | 
<a id="3Menuitem" class="langmenu">Le contenu</a>
 | 
<a id="4Menuitem" class="langmenu">Le panneau de Filtrage</a>
 |
</div>
</div>

Open in new window

And here is the function call:

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

});

Open in new window

There is a "menuitem1" id, so I would like to target the a.langmenu inside of the div mainMenu.

Any help would be much appreciated.

Cheers,

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

pradeep sain

You should call the on click event on document.ready function like this

<html>

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){    
$("#mainMenu a.langmenu").on('click', function(e){
		alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
});
</script>
</head>

<body>
<div id="menuitem2" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Sommaire</a>
 | 
<a id="2Menuitem" class="langmenu">Le carreaux</a>
 | 
<a id="3Menuitem" class="langmenu">Le contenu</a>
 | 
<a id="4Menuitem" class="langmenu">Le panneau de Filtrage</a>
 |
</div>
</div>
</body>
</html>

Open in new window

1Cougar

ASKER

Hello and thank you for responding so quickly.

Well, this code works but only with the line "alert("document ready");" If I take this line out then I do not get the alert "here". If I keep it in then I get the alert "document ready" and the alert "here".

$(document).ready(function() {
	alert("document ready");

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

});	
						  });

Open in new window

1Cougar

ASKER

OK, I moved the code and it works now. I was building dynamic innerHTML so maybe that was the issue.

Thanks and cheers!

1Cougar

ASKER

I take that back...actually I do have the same problem...when I remove the alert "document ready" I no longer have the alert "here".

??